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)

JQuery Autocomplete demo

Changes to the code below will update the demo above in real time.



June 15, 2007, 12:36 a.m. - john

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

Oct. 3, 2007, 11:37 p.m. - Miroslav

Nice article :)

March 6, 2008, 8:56 a.m. - Viru

thanks for the demo. very useful

March 19, 2008, 7:38 a.m. - coto

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 != "") {

March 21, 2008, 11:50 a.m. - Kevin

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

April 17, 2008, 8:11 p.m. - Adam Cox

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.

July 10, 2008, 11:20 p.m. - julinxu

it is cool ..thanks!

July 23, 2008, 5:20 a.m. - jbjigar

Very Nice. Thanks.....

Aug. 17, 2008, 10:59 p.m. - chinuku

Its really very Nice One

Sept. 8, 2008, 9:32 p.m. - aman

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

Sept. 8, 2008, 9:34 p.m. - aman

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.

Sept. 20, 2008, 3:11 p.m. - mike

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

Sept. 25, 2008, 4:38 p.m. - ken mickles

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

Oct. 7, 2008, 12:19 p.m. - Seb

The plugin refuse to load in IE7. Any fix ?

Nov. 5, 2008, 8:30 a.m. - karthick

i need this jquery.js can any one help me

Dec. 16, 2008, 3:35 a.m. - Ravindra Patidar

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?

Feb. 11, 2009, 3:06 a.m. - Seema Kanojia

good code.helpful

Feb. 12, 2009, 5:59 a.m. - heru

help me please ! how to get the id's from value

Feb. 26, 2009, 1:09 a.m. - zahid

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

Feb. 28, 2009, 1:38 a.m. - PHPgeek

cool site, i like it

March 30, 2009, 3:15 p.m. - HKOCH

How can I download this code ? Does it support MySQL

April 2, 2009, 11:29 a.m. - weber

autocomplete.php where to download?

April 13, 2009, 8:33 p.m. - WebDev

nice, but if a program cant perfectly support the major browser on the market, then it is a worse product. we hate micro$oft but user is innocence. keep in mind for this. be a pro

May 1, 2009, 9:18 a.m. - viking

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?

May 14, 2009, 6:40 a.m. - Moog

I was wondering how you got it to match the second word, like if I type "grebe" it findes "Little Grebe" In my own implementation (I use an array instead of the php file) it will only work when i type the first word, nor will it work if I type part of the words like "ebe". Any idea whats wrong?

June 10, 2009, 5:24 a.m. - gihan

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.

June 13, 2009, 4:36 a.m. - Bouke

My formatItem function returns a string that contains html tags, but unfortunately Firefox strips some tags if autocompleter assigns it to li.innerHTML. I suggest that all occurances of ***.innerHTML = bla are replaced with $(***).html(bla); This solves the bug.

July 10, 2009, 6:39 a.m. - Janp

i need this jquery.js can any one help me

July 10, 2009, 1:48 p.m. - Dhuankles

nossa parabens muito bom isso me ajudou muito

Aug. 15, 2009, 5:29 a.m. - ahab

was geht hir

Aug. 20, 2009, 9:56 p.m. - prakash

great work :)

Sept. 8, 2009, 6:32 a.m. - shree

this is testing

Sept. 10, 2009, 2:05 a.m. - Ashvin Hirapara

This is best example of auto complete list. worked fine

Sept. 11, 2009, 3:39 p.m. - Cesar

Great work, it's very useful

Sept. 24, 2009, 1:05 p.m. - Fernando

And the PHP code?

Sept. 29, 2009, 1:56 a.m. - kunal

its very nice

Oct. 5, 2009, 12:53 p.m. - bp

I am trying to implment this example. I am using to get the data from php file. which gets the data from db. how should the data be passed from php file. Any help will be appreciated.

Oct. 5, 2009, 1:56 p.m. - BP

I am using your example and sending the output as name|id and I dont see any dropdown in my applicaiton when i do the url where my data is coming from ....../testindexauto.php?queryString=poo then i see the output. What am I missing please help

Oct. 5, 2009, 1:58 p.m. - bp

</head> <script> $(document).ready(function(){ $("#test").autocomplete("testindexauto.php", { delay:10, minChars:3, matchSubset:1, onItemSelect:selectItem, onFindValue:findValue, autoFill:true, maxItemsToShow:10 }); }); </script> </head> <body> <input size="30" name="test" id="test" type="text" /> </body> </html> </body> i have the jquery libray, autocomplete.js and autocomplete.css files

Oct. 11, 2009, 10:14 p.m. - sri nivas

code is good but plz combined with asp code

Oct. 15, 2009, 1:55 a.m. - wowcompany

Very usefull!

Oct. 18, 2009, 4:11 a.m. - terminas

thanks i think i gonna use it in my project

Oct. 20, 2009, 9:37 p.m. - Dibya Mani Suvedi

onItemSelect doesn't work

Oct. 27, 2009, 10:41 p.m. - Gurudatta

If I want to bind server side control on keyUp event of this textboz then in this case can I use jQuery Autocomplete control?

Oct. 29, 2009, 6:54 a.m. - Uschmu

where is the scrollbar?

Nov. 1, 2009, 1:59 a.m. - felipe fernandez

and autocomplete.php???

Nov. 16, 2009, 4:52 a.m. - firma ekle

this is great for php. i m trying to use with asp.

Nov. 19, 2009, 12:21 a.m. - breath

What about the script on autocomplete.php? Thanks.

Nov. 19, 2009, 6:28 a.m. - xxxxxxxxxx

pas de validation pas de validation pas de validation pas de validation pas de validation

Nov. 19, 2009, 6:36 a.m. - Muslim

- The Unity, Sincerity, Oneness Of Allah "Say: He is Allah, the One and Only, Allah, the Eternal, Absolute, He begetteth not, nor is He begotten, And there is none like unto Him." (Al samad) the holy quran

Nov. 19, 2009, 6:36 a.m. - Muslim

- The Unity, Sincerity, Oneness Of Allah "Say: He is Allah, the One and Only, Allah, the Eternal, Absolute, He begetteth not, nor is He begotten, And there is none like unto Him." (Al samad) the holy quran

Nov. 20, 2009, 12:52 p.m. - ltal

what is the autocomplete.php supposed to return? in what format?

Nov. 25, 2009, 6:02 a.m. - Kataoka

someone got to do to fix the problem in IE 7?

Nov. 30, 2009, 8:35 a.m. - Dell Inspiron Charger

Thanks , this is such a useful Jquey

Dec. 2, 2009, 3:54 a.m. - autocompleter

questo js si che tarella di brutto, non come quelle gran merdate che fa prototype!!!!!!

Dec. 14, 2009, 11:42 p.m. - Awni Obeid

Thanks , this is useful Jquery

Dec. 31, 2009, 10:18 a.m. - RUSTANDI - BINUS 09

well, demonstration AJAX. GBU. n happy new years 2010.

Jan. 6, 2010, 5:34 a.m. - Jeroen

example above doesn't work (FF 3)

Jan. 6, 2010, 10:28 p.m. - máy chiếu

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.

Jan. 8, 2010, 3:08 a.m. - Andy

Hi, I'm trying to write an ASP.Net ashx to return the data. What format should it be in? No matter what I try I always get "id:undefined" so I'm guessing I need to return the array in a certain format? Thanks in advance.

Jan. 15, 2010, 1:26 a.m. - grefin

its great work, can i view the source code for your autocomplete.php, thanks... i just wonder how u did it,

Jan. 15, 2010, 10:16 p.m. - Jerry

I need autocomplete.php format, Please Provide me, Thanks Jerry

Jan. 23, 2010, 12:20 a.m. - Pushkar

How can i postback when i select any item from the AutoComplete dropdown ?

Jan. 24, 2010, 11:47 p.m. - iir

does it compatible with iis 7 ??

Feb. 1, 2010, 3:57 a.m. - Abe

Can you tell me what the format of "autocomplete.php" is? I have tried <li> and "," but its not working. Thanks Abe

Feb. 1, 2010, 11:08 a.m. - William

I've got this working with ASP.NET MVC, but an issue I'm getting is when I try to use 'minChars: 2'. It doesn't seem to work at all. For those trying to get an ASP.NET alternative to work, I used: var action = '/Home/AutoCompleteSuggestions'; $.get(action, function(data){} The 'action' refers to a Controller action in the MVC implementation. For an ASP version to work, just create a page with the database access script that returns a comma-delimited string. Parse it in Javascript with string.split and you've got the array you need.

Feb. 4, 2010, 10:03 a.m. - rolysent

please send me the code

Feb. 5, 2010, 2:22 p.m. - Alex

I need mas information put data base scripts, thank you

Feb. 14, 2010, 1:16 p.m. - ricardo

All these autocomplete tutorials try to wrap you up in a forest that doesn't leave you see the trees, is there any simple way to do this or by trying to teach heaps of information you're just not getting through? I didn't understand.

Feb. 23, 2010, 12:59 a.m. - Ajay

It is very good example

March 5, 2010, 12:20 p.m. - Oliver

I need to know about the format of the php file as well. I know the output is like this: text|1 more text|2 again more text|3 ... I'm doing the output like that but I only get one row in the autocomplete box. Could you share the autocomplete.php. Thanx!

March 6, 2010, 12:31 p.m. - Skip

Can anyone tell me an easy way to have multiple autocomplete forms like this on one form? Does one have to have multiple copies of the <pre> $("#CityAjax").autocomplete( </pre> function? Thanks in Advance, Skip

March 10, 2010, 8:52 p.m. - v

If I enter "</" then my application breaks because it cant allow ?q=</ as parameter

March 10, 2010, 8:54 p.m. - v

If I enter "&lt/" then my application breaks because it cant allow ?q=&lt/ as parameter

March 13, 2010, 3:05 p.m. - JHON

para los que copiaron del codigo de arriba(da error en explores).este lo tome del codigo fuente de la pagina: 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; } $(document).ready(function() { $("#CityAjax").autocomplete( "llamarproductos.php", { delay:10, minChars:2, matchSubset:1, matchContains:1, cacheLength:10, onItemSelect:selectItem, onFindValue:findValue, formatItem:formatItem, autoFill:true } ); });

March 13, 2010, 3:08 p.m. - www.lachacita.com

se ve bien en firefox , pero en internet explorer no sale bien?????

March 13, 2010, 3:20 p.m. - www.lachacita.com

ya solucione el erro de vista en explores. solucion : tenia mal el final de la etiqueta de la hoja de estilo. type="text / css" /> type="text/css" />- model: comments.comment pk: null fields:(el error eran los espacios)

March 13, 2010, 4:37 p.m. - www.lachacita.com

adicione un 3 parametro: echo utf8_encode("$item[$cont]|$value|$ump "); var sValue = li.selectValue; $("#codigoarticulo").text(sValue); $("#uempaque").text(sValue2); como asigno el 3 parametro?? sValue2

March 20, 2010, 2:28 a.m. - Ganesh

Very nice Demo

March 22, 2010, 8:53 p.m. - Zest Nguyen

on IE ,can not clear cache , help help///

March 23, 2010, 3:32 a.m. - Kosy

Hi Abe, Use it in "$key|$val" format

March 29, 2010, 11:52 p.m. - dev

no license info anywhere. is it free to use/change?

April 15, 2010, 1:25 a.m. - vi

i used this code but it generate error and tell me about how can i get js file include in this code. please help me

April 29, 2010, 5:08 a.m. - minesh

I need to pass extra paratmeters to backend file, i.e. stateid from drop-down need to be passed, so that only cities within that state could be listed. Any option for this?

April 30, 2010, 3:45 a.m. - Mag

Thanks - I shall have a play with this.

April 30, 2010, 7:51 a.m. - khabe

hello so i'm i have a problem with my autocompleter is doen't work at IE

April 30, 2010, 9:42 a.m. - John Manoukidis

Very Nice. Thanks.....

May 1, 2010, 3:44 a.m. - רופא שיניים

Nice plugin! thanks

May 12, 2010, 8:09 a.m. - Tejas Parab

Thank you, this works gr8!!

May 20, 2010, 3:53 a.m. - manish

good yaarr

May 20, 2010, 3:56 a.m. - manish

same problem don't work in ie is any solution?

May 21, 2010, 6:32 a.m. - Pilo

Just exactly what I am looking for !

May 28, 2010, 1:59 a.m. - Mohit Padiyar

My friend got marry last Sunday :-)

June 5, 2010, 4:52 p.m. - homepage

After typing "night" on the text field, the Autofill doesn't get a wrong string. The original version has the problem that it assumes matching from the starting characters. In some applications, string search needs to match anywhere in a string of characters.

June 11, 2010, 1:46 p.m. - Manish Pal

very good code. that's very good code in help. i like very much at this type code

July 23, 2010, 7:24 a.m. - Prem

thank you...... ajaxdaddy

Aug. 17, 2010, 9:13 a.m. - sbv

it is not working in case if url is passed as $("#city").utocomplete("/search.action") what is the solution for this. Thanks in advance

Aug. 18, 2010, 7:09 a.m. - sbv

Is there a way to make ajax call and display it in text box? I am calling function as $("#CityAjax").autocomplete(url, options) here url is nothing but "/search.do?" it is not making ajax call to populate the data. Please help me to do

Aug. 19, 2010, 4:50 p.m. - kokdemir

I cannot figure out how to use same code or functions for two different field

Sept. 6, 2010, 9:11 a.m. - buzzknow

nice script :)

Sept. 7, 2010, 5:59 p.m. - Manuel Lama

Writing the strings "ea","es","en", "ec",...when there are words having an "e"+other letter, will cause -sometimes- the plugin to misfunction.

Sept. 27, 2010, 2 a.m. - Donny Kurnia

I'm using google chrome 6. When I navigate the result using arrow button, the list is stay static, not scrolled, so I cannot see the result below the currently displayed result.

Sept. 29, 2010, 12:25 p.m. - Tchat

Thanks for page :)

Sept. 30, 2010, 11:48 a.m. - Tchat

Nice plugin

Oct. 1, 2010, 3:50 a.m. - rina

test percobaan

Oct. 12, 2010, 6:50 a.m. - vanaja

hai how r u

Oct. 19, 2010, 2:25 a.m. - cristy

HI! Thanks for sharing! Can I use the plugin with a dropdwon box and pass it to a function? To limit results to a specified field. I am using codeigniter. Your advice is greatly appreciated!

Oct. 28, 2010, 4:25 p.m. - J. Black

When the autocompleter is trying to determine if the value typed into the text box is a cache hit or not (in the requestData function), it calls loadFromCache which should return a javascript array of elements that match. But if it doesn't find any matches, it still returns an empty javascript array of elements, which causes it not to perform an Ajax call when it should. Line 322 should be changed from if (data) { to if ((data) && (data.length)) { due to a javascript array of '[ ]' equating to true in the first case, when it shouldn't.

Nov. 2, 2010, 6:25 a.m. - vamsi

nice tutorial for ajax

Nov. 2, 2010, 8:02 a.m. - jeiboy

hey thanks for this

Nov. 8, 2010, 12:31 a.m. - Dalvir

we r using two select field and two php file for suggestion for each field. But it shows options from both of the url of autocompeleteczfp

Nov. 29, 2010, 12:36 a.m. - aman

this is great site and good

Feb. 21, 2011, 4:39 a.m. - bob

Hi, nice work !! But I just wondering for exemple why max:4, in option does not work ?

Feb. 21, 2011, 1:44 p.m. - bob

OK OK I found it : this is : maxItemsToShow:4,

Feb. 26, 2011, 11:52 a.m. - alnour

aahahahahahaha aahahahahahahaha ahahahahaha

March 1, 2011, 6:29 a.m. - james

ya this code is nice . but this auto complete not work in IE 7 and 8 please tell me any solutions

March 6, 2011, 9:52 a.m. - wiyono

Really nice... Thank you so much...

March 24, 2011, 12:23 p.m. - ChileCaliente

How to use it with mysql? Thanks

March 28, 2011, 4:48 a.m. - sandeep

Hi, Thanks a ton for the solution provided. This has been very helpful for me in solving problem faced with Autocomplete in my application.

April 20, 2011, 1:39 p.m. - bret

this article saved my butt. thanks a million.

May 4, 2011, 5:27 a.m. - Maciej Zaleski

Very good example but I was a bit unsure where can I change the list of suggestions.

July 7, 2011, 6:12 a.m. - Dhiraj

Excellent was searching this from hours!!

Aug. 19, 2011, 10:40 p.m. - faxianhu

nice informative post, thanks for sharing`

Jan. 14, 2012, 8:59 a.m. - Julhas Sujun

How i will search by barcode reader?Suppose i have some fields if only one field will fillup by barcode scanner then instantly the another fields will fillup .In my library automation project if i enter accession no by barcode scanner then all the book infomations will show without clicking next button or submit button.can any one help me.

Jan. 27, 2012, 4:43 a.m. - shino

is any event available when we type a word which is not in the list (against unmatched word) ?

Feb. 10, 2012, 8:38 a.m. - wiscichflus

Splendid article! I'm now starting out in social media marketing and trying to learn how to best capitalize on social networking for my small business. Thanks for the information!

Feb. 21, 2012, 2 p.m. - hakkatil

Thank you for the great article. very nice.

March 12, 2012, 11:35 a.m. - asha

gklj;/jm

March 29, 2012, 9:57 a.m. - xbudda03

Hi, this is a wonderful script. However, I have the following problem. I run the script, not from the index page. My site name is encrypted. x1 / x2 / x3 ... The script, however, is always trying to transfer the variables to the index. How can I change it? Kind regards.

April 24, 2012, 10:49 a.m. - jidesun

Its really very Nice One.

May 15, 2012, 7:58 a.m. - Dunisani

Just want to know how do you clear the cache of the autocompelete thanks

May 16, 2012, 11:45 p.m. - kavitha

It's o.k..............................

May 30, 2012, 12:29 a.m. - EDUB

This start out ok but breaks down if the person is searching for something in the middle of the string. For example look what happens if you type "night heron". The drop down works properly but the autofill text in the box is a bit screwy.

June 16, 2012, 3:58 a.m. - Dario

It's really, really helpfull. We will use it in the school to impress our teacher