Autocompletion with the jQuery autocomplete plugin

The jQuery autocomplete plugin allows developers to implement autocompletion for text input fields. Suppose you have a dictionary application. You might want to autocomplete words for a user to ease searching.

The following snippet uses the autocomplete plugin to autocomplete a list of words.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link rel="stylesheet" href="/js/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="/js/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.js"></script> 

<script type="text/javascript">
	$(document).ready(function(){
        	$("#searchField").autocomplete("/autocomplete");
        });
</script>

The words are dynamically loaded from a URL provided by the application. The URL in this case is “/autocomplete” and it’s supplying a list of words to the autocomplete plugin with a maximum of 10 words at each request.

The following URL illustrates the output which the autocomplete plugin expects.

http://definely.com/autocomplete?q=exam

Output:

exam
exam paper
examen
examination
examination paper
examine
examinee
examiner
example

Autocompletion

This entry was posted in JavaScript and tagged , , , , , , , . Bookmark the permalink. Trackbacks are closed, but you can post a comment.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Why ask?