ajax + php = live search

Googling the entire web, maybe someone can offer me their own or previously used live search on the site. In a nutshell, the requirements are to enter characters into the form, the php script takes data from mysql and passes it to the browser … In general, it should look something like this ))

live search


Answer 1, authority 100%

<input type="text" id="search_box">
<div id="search_advice_wrapper">
</div>
<script type="text/javascript">
  $('#search_box').keyup(function(){
    if($(this).val().length>3){
      $.get('search_assistant.php',{'query':$(this).val()},function(data){
        data = eval('('+data+')');//json data. array of strings
        if(data.length!=undefined && data.length>0){
          $("#search_advice_wrapper").html('');
          for(i in data){
            $("#search_advice_wrapper").append('<div class="advice_variant">'+data[i]+'</div>');
          }
        }
      });
    }
  });
  $('.advice_variant').live('click',function(){
    $('#search_box').val($(this).text());
  });
</script>

Something like that.

idea: when the button is released, the script reads the "value"attribute of the text field. If it is longer than 3 characters, then it sends this string to the PHP handler, which checks all possible options for the given character combination against the database. Well, for example, 'like("'.$_GET['query'].'%")'in Mysql. You said deal with it. Next, an array of strings arrives back, formatted as Json (you can just have a set of strings, but flexibility is lost). From this array, each line goes into a special search_advice_wrapper block. When you click on a line in this block, its content is sent to the search field.


Answer 2, authority 50%


Here is the article


Answer 3, authority 25%

I would also recommend checking out sphinx.