Live search box example code

Posted on 2012-09-07
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

    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


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
    PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
    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)

    737 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

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now