0

I just finished the code that allow to me to search for product information from mysql database by typing the word in search text field and works great. But this text field is only work when press enter and i want to change to live search like auto complete.

I'm trying to change to jquery Keyup but is not working, please see the code in bottom to see if this possible to change to live search on text fields!

<script type="text/javascript">

$(function() {
//-------------- Update Button-----------------


$(".search_button").click(function() {
    var search_word = $("#search_box").val();
    var dataString = 'search_word='+ search_word;

    if(search_word=='')
    {
    }
    else
    {
    $.ajax({
    type: "GET",
    url: "searchdata.php",
    data: dataString,
    cache: false,
    beforeSend: function(html) {

    document.getElementById("insert_search").innerHTML = ''; 
    $("#flash").show();
    $("#searchword").show();
     $(".searchword").html(search_word);
    $("#flash").html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;Loading Results...');



            },
  success: function(html){
   $("#insert_search").show();

   $("#insert_search").append(html);
   $("#flash").hide();

  }
});

    }


    return false;
    });



});
</script>
Subin Jacob
  • 4,692
  • 10
  • 37
  • 69
andy
  • 13
  • 5
  • Why re-invent the wheel? Have a look at [jQuery UI Autocomplete](http://jqueryui.com/autocomplete/) or [typeahead.js](http://twitter.github.io/typeahead.js/) – Phil Oct 21 '13 at 03:29
  • 1
    try $("#search_box").keyup() instead of $(".search_button").click() – Subin Jacob Oct 21 '13 at 03:29

3 Answers3

2

you could use .keyup(), like

$("#search_box").keyup(function() { //keyup for #search_box input
    var search_word = $(this).val(),
        dataString = 'search_word='+ search_word;
    ....rest of your code
});
Sudhir Bastakoti
  • 99,167
  • 15
  • 158
  • 162
1

Change click to keypress or similar. If you do keypress you'll probably want to put your callback action inside a timer with a short delay so you don't hit your server too hard.

Check out this post on how to put a timer on.

Community
  • 1
  • 1
scrowler
  • 24,273
  • 9
  • 60
  • 92
1

I've spotted a bits in your code that can definitely be improved.

First off it's important to remember that every time a user presses a key it will launch a new request to the server. Let's do something like this...

// This will be our timer to stop the server being flooded by requests
var searchDelay;

// How many milliseconds should we wait before we search?
var WAIT_TIME = 120;

// This will be our search function
function runSearch() {
    // Grab the value from the input
    var search_word = $("#search_box").val();

    // Stop empty answers
    if (search_word == '') return;

    // Show your result box
    $("#insert_search").empty();
    $("#flash").html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;Loading Results...').show();
    $("#searchword").show();
    $(".searchword").html(search_word);

    // We can shortcut the $.ajax with a $.get too, which will do some encoding for the URL for us.
    $.get('searchdata.php', {search_word: search_word}, function(data) {
        $("#insert_search").append(html).show();
        $("#flash").hide();
    }).fail(function() {
        // What happens if the server returns an error?
        alert('Sorry, please try again later.');
      });
}

// Now we can very easily bind our slick new function to different events!
$('.search_button').on('click', runSearch);

// And if the search box is typed into...
$('#search_box').on('keyup', function() {
   if (typeof(searchDelay) != 'undefined') clearTimeout(searchDelay);
   searchDelay = setTimeout(runSearch, WAIT_TIME);
});
FBoucaut
  • 71
  • 3