Live search box example code

I'm looking for a script for a livesearch box. This script should do the following:

* When typing, on each change (adding or deleting a character), a request to a file should be made.
* This file (query.php) executes a local query and gives back the results. These results may be xml, html or json. This works and is not part of the question!
* On each change, the query should be executed, so the results change.
* The results are shown in a list below the search box.
* You can select an item by clicking the mouse, after which that text is copied to the search box. This does not execute the search.
* Another option to select an item is by using the cursor keys and pressing enter, which copies that value to the search box.
* When moving back with the cursor, the original value that is typed in should be shown.
* Pasting and cutting text should result in another update, although this is not an absolute must have for now.

It's essentially the type of behavior that Google Maps uses. Is a complete script (javascript/jquery, css, html) like this available somewhere?
LVL 13
R7AFAsked:
Who is Participating?
 
EMB01Commented:
Just use jQuery's keypress() event:

http://api.jquery.com/keypress/

Here's a full example of how to call a file on keypress():

$('#mySearchBox').keypress(function(){
    $.ajax({
            url: "search.php",
            type: "post",
            data: $(this).val().serialize(),
            error: function(data){
                alert("There was an error while searching the database. ");
            },
            success: function(data) {
                // update your page with the results
            }
    });
});

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.