jQuery live php search problems
Alright so what I am doing is using a text input and using the entered string to search a database for something that matches it, the trick is that it searches/filters the results each time a new letter is entered into the text input.
So if I had a database and I entered "a" in the filter input it would count all of the rows with "a" in the database and return the id's then loop through that many times grabbing each rows data.
Then I append that to the html page and it will be added.
Now the problem is that if letters are entered too quickly (normal typing speed) into the filter input it will not filter them correctly. The javascript code is below.
An example of the problem can be seen at
http://digitalinferno.net/inferno2/ under Archive Search on the side.
-
// Listen for the value of the input to change
$('input.filter').keyup(function() {
// Grab the current value of the filter
var filter = $(this).val();
// Remove archive items already displayed
$('#archive ul li').remove();
// Ajax to get the id's that match the filter
$.getJSON('filter.php', { action: 'count', filter: filter }, function(data) {
// Loop through the id's
for (var i = 1; i < data['num']; i++) {
// And grab the title and date for the current one (i)
$.getJSON('filter.php', { action: 'get', id: data[i] }, function(data) {
// Format the results using html
var html = '<li><a href="#"><div class="title">' + data['title'] + '</div><div class="date">' + data['date'] + '</div></a></li>'
// Display the current item
$('#archive ul').append(html);
// hide then fadeIn each item
$('#archive ul li:last-child').hide();
$('#archive ul li:last-child').fadeIn();
});
}
});
});
[/url]