Question

I am looking to create a search feature similar to google using jQuery. however, I am unsure of the name of one of its features.

The feature in question is the text prediction element.

eg. if I type jquery it shows in the input box “Jquery” as my input but then in grey it adds the text of the first result in the input box and allows the user to select this “predictive value”

I have searched high and low for the name of this functionality and a working example.

any help would be greatly appreciated

Answer 1

You are looking for an auto complete feature. jQuery UI has an awesome autocomplete feature included in it.

http://jqueryui.com/demos/autocomplete/

The result of your search you can get from an array or a database table (thru a server page).It is quite simple to set up as below

The below example is using an array as data source for the auto suggest items.

$(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });

The above code binds the textbox with id “tags” to the autocomplete function. we mentioned the source value as the name of our array where we stored different programming language names.

Mostly, you may need to get data from a database, then you use an intermediate server page as datasource. this server page will get data from the data access layer and give you the result.

$( "#tags" ).autocomplete({
            source: "searchtags.php",
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );
            }
        });