Live search box example code

Posted on 2012-09-07
Medium Priority
Last Modified: 2012-09-13
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?
Question by:R7AF
1 Comment
LVL 14

Accepted Solution

EMB01 earned 2000 total points
ID: 38376013
Just use jQuery's keypress() event:


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

            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


Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month16 days, 3 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question