Next Prev

jQuery Autocomplete

Read more and download "jQuery Autocomplete"

This script is based on jQuery Autocomplete plugin made by PengoWorks.
It has many options and is quite easy to setup in your page.
You can pass advanced options as a JavaScript object, hashes etc.
It's easily to edit the style of the dropdown result box, there are a couple of css classes.

- You can use local arrays of data (in javascript arrays), so you don't have to use AJAX to query your server
- Limit you number of results dropdown to XX (good for limiting the results to users)
- Autofill pre-populates text box as you type
- New findValue() method can be used to programmatically determine if the value in the box is a valid option. (Useful for verifying the text entered is an existing value option.)
- Dropdown options now correctly re-position themselves on each display (which means they adjust for changing to the DOM)
- Dropdown box defaults to the width of the input field its attached to (you can manually specify a larger width as well)
- Better emulates Windows autocomplete boxes (for example: hitting delete and retyping the same box will now bring back the dropdown menu)

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<base href="http://www.ajaxdaddy.com/ajax/jquery/autocomplete/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
	<title>j</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="javascript/jquery.js"></script>
  <script type="text/javascript" src="javascript/jquery.autocomplete.js"></script>
	<link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" />
	
</head>
<body>

<form onsubmit="return false;" action="">
	<p>
		Ajax City Autocomplete: (try a few examples like: 'Little Grebe', 'Black-crowned Night Heron', 'Kentish Plover')<br />
		<input type="text" style="width: 200px;" value="" id="CityAjax" class="ac_input"/>
		<input type="button" onclick="lookupAjax();" value="Get Value"/>
	</p>
</form>

<script type="text/javascript">
  function findValue(li) {
  	if( li == null ) return alert("No match!");

  	// if coming from an AJAX call, let's use the CityId as the value
  	if( !!li.extra ) var sValue = li.extra[0];

  	// otherwise, let's just display the value in the text box
  	else var sValue = li.selectValue;

  	//alert("The value you selected was: " + sValue);
  }

  function selectItem(li) {
    	findValue(li);
  }

  function formatItem(row) {
    	return row[0] + " (id: " + row[1] + ")";
  }

  function lookupAjax(){
  	var oSuggest = $("#CityAjax")[0].autocompleter;
    oSuggest.findValue();
  	return false;
  }

  function lookupLocal(){
    	var oSuggest = $("#CityLocal")[0].autocompleter;

    	oSuggest.findValue();

    	return false;
  }
  
  
    $("#CityAjax").autocomplete(
      "autocomplete.php",
      {
  			delay:10,
  			minChars:2,
  			matchSubset:1,
  			matchContains:1,
  			cacheLength:10,
  			onItemSelect:selectItem,
  			onFindValue:findValue,
  			formatItem:formatItem,
  			autoFill:true
  		}
    );
  
</script>
</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Adam Cox

2008-04-17 20:11:22

Very nice article! I was going to use AJAX to get the data from the DB on the server, but this might be an easier approach.

Kevin

2008-03-21 11:50:31

this is really cool... i use script.aculo.us

Coto

2008-03-19 07:38:44

This is a bug!!! function requestData(q) { if (!options.matchCase) q = q.toLowerCase(); var data = options.cacheLength ? loadFromCache(q) : null; // recieve the cached data if (data && data != "") {

Viru

2008-03-06 08:56:34

thanks for the demo. very useful

Frank

2007-11-04 07:58:43

ver ynice

Miroslav

2007-10-03 23:37:52

Nice article :)

John

2007-06-15 00:36:31

Useful implementation of jQuery plugin. There are so many ways to add this to your html

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

jQuery Autocomplete

Comment on this example