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)

Web 2.0 Box Generator

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

Gihan

2009-06-10 05:24:40

it's really a great work. This is what i was searching for. Thanx. But I need something more, when I press enter i need to add the selected value and close the dropped box. Please help me here..... .thank you again.

Viking

2009-05-01 09:18:14

one more question! I need to fire off a function when the ajax results return so that I can hide a "waiting" image... how do I do that?

Viking

2009-05-01 09:16:00

I am new to jquery so please forgive me if this is a silly question! I have a text field called "bin" where users type and the autocomplete fires off. However, there is a dropdown that has a value that is used in the backend SQL for the autocomplete. My problem is that I am trying to pass the value of this drop down when the autocomplete fires off... extraParams:{myLocId1:form1.ajaxloc.value}. but this value is always the same. It doesnt change when I change the dropdown. I have also tried passing it in the url portion of autocomplete but same problem. here is my code: $("#bin").autocomplete( "myServlet?module=inv&mode=binlookup&page=inv_stock_qty&page_type=content&", { delay:10, minChars:2, matchSubset:1, maxItemsToShow:12, matchContains:1, extraParams:{myLocId1:form1.ajaxloc.value}, cacheLength:1, onItemSelect:selectItem, onFindValue:findValue, autoFill:true } ); any ideas?

Ertert

2009-03-03 02:48:05

retert

PHPgeek

2009-02-28 01:38:17

cool site, i like it

Zahid

2009-02-26 01:09:52

it's really cool I will use in my own projects

Seema Kanojia

2009-02-11 03:06:23

good code.helpful

Ravindra Patidar

2008-12-16 03:35:03

It is working well at firefox but in IE7 i got the error message "Internet explorer cannot open site .." "operation aborted". Can you please help me to resolve this problem?

Karthick

2008-11-05 08:30:48

i need this jquery.js can any one help me

Seb

2008-10-07 12:19:49

The plugin refuse to load in IE7. Any fix ?

Ken Mickles

2008-09-25 16:38:32

If you get operation aborted in IE, wrap your autocomplete call in $(document).ready(). Should probably fix it.

Mike

2008-09-20 15:11:04

Doesn't work in IE for me.. i got the message "Internet explorer cannot open site .." "operation aborted"

Aman

2008-09-08 21:34:58

it is not logic of the writter , got from the JQuery website and paste here as well. it has many issues and bugs and it nevere looks good in MVC pages.

Aman

2008-09-08 21:32:20

Can any one tell me , why it throws an error when using this in MVC.

Chinuku

2008-08-17 22:59:15

Its really very Nice One

Jbjigar

2008-07-23 05:20:46

Very Nice. Thanks.....

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