Question

Suppose there are tags in the database table, or in a text file or in a xml file.

Now when an user type something in the textbox, it will call the jquery ajax autocomplete searching function like we do for stackoverflow tags adding.

How can i do this with jquery ajax? Can someone post complete code with example?

I have read this, http://docs.jquery.com/Plugins/Autocomplete, but could not understand how to implement that.

Answer 1

I would recommend you using the jQuery UI AutoComplete. The documentation provides a full example of how to set it up with AJAX.

You put an input field:

<input id="tags" name="tags" />

and then apply the plugin:

$(function() {
    $('#tags').autocomplete({
        source: '/tags',
        minLength: 2
    });
});

This will invoke the /tags server side script and pass it the term query string parameter that will contain the input value. For example: /tags?term=asp. The server will then use the asp value to look in the database and respond with a JSON of the following form:

[ { "id": "1", "label": "label 1", "value": "value 1" }, 
  { "id": "2", "label": "label 2", "value": "value 2" },
  { "id": "3", "label": "label 3", "value": "value 3" },
  ...
]

which will represent an array of objects that match the search criteria and which will be shown in the dropdown.

Obviously the implementation of the server side script will greatly depend on the server side language you are using, the database access technology, …