Example including search form with Suggestions

This page shows you how to include a Search Form in your website pages, that includes search suggestions to use it with SSEP Search Engine Script.

Will result this search input field (it works if it is accessed from server: http://localhost/example-search-form-sugest.htm ):
• After you have indexed pages of your web site (see the "ssep/readme.html" page), add this code in website pages (a HTML form, and JavaScript with Ajax for suggestions):

<form action="/ssep/index.php" method="post" id="search">
  <input type="search" name="sr" autocomplete="off" maxlength="45" id="ssep_inp" pattern="[A-z0-9_ \-]{2,45}" required="required"
  title="Between 3 and 45 characters: Letters, Numbers, and Space." placeholder="Search" />
  <input type="submit" value="Search" />
</form>
<script>
// <![CDATA[
// SSEP - Search Suggestions - from: http://coursesweb.net/ 
// Ajax - Seceives data to send, and a callback function (called when the response is received)
function ajaxSend(datasend, callback) {
  var request =  (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
  datasend += '&isajax=1';    // to know in php it is ajax request

  request.open("POST", '/ssep/index.php');			// define the request

  // adds  a header to tell the PHP script to recognize the data as is sent via POST, and send data
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  request.send(datasend);

  // Check request status,  when the response is completely received, pass it to callback function
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      callback(request.responseText);
    }
  }
}

// keyup event on #search
if(document.getElementById('search')) {
  var src_frm = document.getElementById('search');    // form for search
  if(!document.getElementById('src_sugest')) {
    src_frm.insertAdjacentHTML('beforeend', '<div id="src_sugest"></div>');
    var src_sugest = document.getElementById('src_sugest');    // element for search-suggest
  }
  var cache_sugest = {};    // keep 1st 11 returned sugested
  var sugest_src = [];    // store the 'src' keys of sugested in $cache_sugest

  // get string value, if 3+ characters, removes non alpha-numeric-line-space characters
  // call ajax with the string. Add response in Div #src_sugest
  function srcSugest(src) {
    src = src.replace(/([^a-z0-9 ])/ig, ' ').replace(/( [a-z0-9]{1,2} )|(^[a-z0-9]{1,2} )|( [a-z0-9]{1,2}$)/ig, ' ');
    src = src.replace(/\s\s+/ig, ' ').replace(/^\s+|\s+$/g, '').toLowerCase();

    if(src.length > 2) {
      // if sugested in cache, add it, else, get via ajax
      if(cache_sugest[src]) src_sugest.innerHTML = cache_sugest[src] +'<div onclick="this.parentNode.innerHTML = \'\';">X</div>';
      else {
        ajaxSend('sugest='+ src, function(resp){
          if(resp.length > 8) {
            if(src_sugest) src_sugest.innerHTML = resp +'<div onclick="this.parentNode.innerHTML = \'\';">X</div>';

            // store sugested in $cache_sugest, keeping 15 caches (delete $src from $sugest_src, and $cache_sugest)
            if(sugest_src.length > 15) delete cache_sugest[sugest_src.shift()];
            cache_sugest[src] = resp;
            sugest_src.push(src);
          }
        });
      }
    }
    else if(src_sugest) src_sugest.innerHTML = '';
  }

  src_frm['sr'].removeEventListener('keyup', function(e){srcSugest(e.target.value);}, false);
  src_frm['sr'].addEventListener('keyup', function(e){srcSugest(e.target.value);}, false);

  // called onclick a sugested title. Get and set search phrase
  function getSugest(src_t) {
    src_sugest.innerHTML = '';
    src_frm['sr'].value = src_t.innerHTML.replace(/\<[^\>]*\>/ig, '');    // delete tags
    src_frm.submit();
  }
}
// ]]>
</script>

- The address from "action" in <form> must open the "ssep/index.php" file.

• And add this CSS code into an external .css file or <style> tag included in the web page (it styles the suggestions).

#search {
 position:relative;
 padding:0;
}
#search #ssep_inp:focus {
 background:#eeeefe;
}
#src_sugest {
 position:absolute;
 left:-.5em;
 margin:1px 0 0 2px;
 max-width:15em;
 max-height:30em;
 background:#eee;
 text-align:left;
 padding:0;
 font-size:.9em;
 font-family:"Calibri",sans-serif;
 z-index:9990;
 overflow-Y:auto;
 overflow-X:hidden;
 -moz-border-radius:.5em;
 -webkit-border-radius:.5em;
 -khtml-border-radius:.5em;
 border-radius:.5em;
}
#src_sugest h4 {
 margin:3px 2px;
 border-bottom:1px dashed #0001bb;
 padding:1px;
 font-weight:600;
 cursor:pointer;
}
#src_sugest h4:hover {
 background:#fefefe;
}
#src_sugest .hglw {
 background:#fbfbbb;
 font-weight:700;
 font-style:oblique;
}
#src_sugest div {
 position:absolute;
 top:0;  right:0;
 border:1px solid #fe0000;
 background:#fbfbfb;
 padding:1px 3px;
 font-size:1em;
 font-weight:700;
 color:#fb0001;
 cursor:pointer;
 -moz-border-radius:.4em;
 -webkit-border-radius:.4em;
 -khtml-border-radius:.4em;
 border-radius:.4em;
}
#src_sugest div:hover {
 background:#fbfb00;
}

CoursesWeb.net // MarPlo.net