Home

Welcome to the search-suggestion-box wiki!

search-suggestion-box is a project for providing suggestion when user types in inputs.

How to use it

Clone the Project Copy sug.css, fuzzyset.js, sug_tbl.js in your project You also need jquery which is inside the project or you can use yours. link them in your project as shown below:

<script src="js/jquery-3.2.0.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/fuzzyset.js"></script>
<script type="text/javascript" src="js/sug_tbl.js"></script>

<link rel="stylesheet" type="text/css" href="css/sug.css">

Then create your form as shown below:

<form>
      <!-- wrap your input by a inline-block element for better positining of search result table and make this
      wraping element position relative-->
      <div id="wrap-ip">
          <input type="text" id ="search" placeholder ="search">
      </div>						  
</form>

Now write the script as shown below:

<script type="text/javascript">

    $(document).ready(function () {


      // call the mk_tbl() function from your input**
      $('#search').mk_tbl();

      //make an array of strings like this the strings that will be displayed in the suggestion
      var arr_of_str = ['apple','angle','arrow','astro','airplane','ash','alone','art','artist'];                                                                                                               


      //now pass your input id and your array of strings and maximum no of suggestions you want to show in   the 
      function suggestion()
      //default maximum suggestion no is 3

      suggestion('#search',arr_of_str,5);

    });

 </script>

If any confussion or problem email:surya.neu71@gmail.com#