jQuery Documention For Autocomplete

**ABNER** · 07-07-2009

Hello everyone! I have started with jQuery. What I want is to use jQuery autocomplete plugin. can you tell me Detailed information about the autocompleted plugin and its implementation ,how can we implement this jquery plugin please help me Thanks in advance

**Katty** · 07-07-2009

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

Download: jQuery 1.3.1 (Visual Studio Autocomplete Documentation)

jquery-1.3.1-vsdoc.js 187 KB

SHA1 Checksum: 8cb68cdf00bc29ddce5abaeac9b625a6a82e5900
Tip: Use the SHA1 checksum shown to verify file integrity.

**Zecho** · 07-07-2009

An autocomplete input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook.

Both local and remote data can be used: Local is good for small datasets (like an addressbook with 50 entries), remote is necessary for big datasets, like a database with hundreds or millions of entries to select from.

A simple autocompleted input, with the jQuery API Reference as data.

Code:

  var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities". split ( ""); 
  $ ( "# example"). autocomplete (data);

Code:

 <! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src = "http://code.jquery.com/jquery-latest.js"> </ script> <link rel = "stylesheet" href = "http://dev.jquery.com/view/trunk/plugins/autocomplete/ demo / main.css "type =" text / css "/> <link rel =" stylesheet "href =" http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css "type = "text / css" /> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"> < / script> <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"> </ script> <script type = "text / javascript" src = "http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"> </ script> <script> $ (document). ready (function () (var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities". split ( ""); $ ( "# example"). autocomplete (data);)) </ script> </ head> <body> API Reference: <input id="example" /> (try "C" or "E") </ body> </ html>

**opaper** · 07-07-2009

Example

$("#input_box").autocomplete("my_autocomplete_backend.php");

In the above example, Autocomplete expects an input element with the id "input_box" to exist. When a user starts typing in the input box, the autocompleter will request my_autocomplete_backend.php with a GET parameter named q that contains the current value of the input box. Let's assume that the user has typed "foo"(without quotes). Autocomplete will then request my_autocomplete_backend.php?q=foo.

The backend should output possible values for the autocompleter, each on a single line. Output cannot contain the pipe symbol "|", since that is considered a separator (more on that later).

An appropiate simple output would be:

foo
fool
foot
footloose
foo fighters
food fight

Note that the autocompleter will present the options in the order the backend sends them.

For complete information download this File