How to make a real-time search?

[yoursurrogategod]

If I'm posting in the wrong part of the forum, please feel free to move this it to a more appropriate location.

 

Basically we have this little Javascript powered search.  As you type the values into a text box, the results are displayed as the user types.  The problem with this design is that if there needs to be an update, the user has to e-mail me an excel sheet and then I have to manually update the little data.js file with all of the terms.  This is tedious and annoying and nobody likes it.  What I would like to do is have some sort of database-like setup where the user inserts their updates and that's it (I'm not even in the loop!).  How can I do this best?  I was thinking of having a Javascript script that continually polls the DB every time the user types something, but this would result in a lot of hits against the DB -- and if possible -- I'd like to avoid.  Any suggestions?  And yes, the live search is a requirement.

[PFMaBiSmAd]

You can dynamically produce and output the data.js file using a server-side scripting language, getting the actual data out of a database, depending on the maximum number of data items (after more than a few 10k-100k of characters, you wouldn't want to do this all at once.)

 

You can also use ajax to dynamically get specific blocks of data. To limit the number of http requests, you would do something like retrieve all the entries that match the first letter typed and send them to the javascript on the page all at once, for that first letter. Your existing search scheme would then use that block of data, the same as if it had been output as part of the data.js file.

[yoursurrogategod]

You can dynamically produce and output the data.js file using a server-side scripting language, getting the actual data out of a database, depending on the maximum number of data items (after more than a few 10k-100k of characters, you wouldn't want to do this all at once.)

 

You can also use ajax to dynamically get specific blocks of data. To limit the number of http requests, you would do something like retrieve all the entries that match the first letter typed and send them to the javascript on the page all at once, for that first letter. Your existing search scheme would then use that block of data, the same as if it had been output as part of the data.js file.

I know that w3schools are a bad source for web-development topics.  Do you know of any good books on AJAX?  I'd like to use the AJAX option.

[ignace]

If you use a library like jQuery you don't even have to worry about the whole AJAX part. Running AJAX with jQuery is as simple as (term is what the user typed):

 

$.get('data.js?term=' + term, callback);

 

As demonstrated below:

 

// Example Code, Not Suitable For Production
function runLiveSearch(conf)
{
    conf = conf || {};
    var term = conf.term || '',
        minLength = conf.minLength || 3,
        callback = conf.callback || {};

    if (term.length >= minLength) {
        $.get('data.js?term=' + term, callback);
    }
}

$('#live-search').keypress(function() {
    runLiveSearch({term: $(this).val(), callback: function(data) {
        // process
    }});
});