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)
Useful implementation of jQuery plugin. There are so many ways to add this to your html
Nice article :)
thanks for the demo. very useful
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 != "") {
this is really cool... i use script.aculo.us
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.
it is cool ..thanks!
Very Nice. Thanks.....
Its really very Nice One
Can any one tell me , why it throws an error when using this in MVC.
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.
Doesn't work in IE for me.. i got the message "Internet explorer cannot open site .." "operation aborted"
If you get operation aborted in IE, wrap your autocomplete call in $(document).ready(). Should probably fix it.
The plugin refuse to load in IE7. Any fix ?
i need this jquery.js can any one help me
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?
good code.helpful
help me please ! how to get the id's from value
it's really cool I will use in my own projects
cool site, i like it
How can I download this code ? Does it support MySQL
autocomplete.php where to download?
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
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?
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?
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.
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.
i need this jquery.js can any one help me
nossa parabens muito bom isso me ajudou muito
was geht hir
great work :)
this is testing
This is best example of auto complete list. worked fine
Great work, it's very useful
And the PHP code?
its very nice
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.
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
</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
code is good but plz combined with asp code
Very usefull!
thanks i think i gonna use it in my project
onItemSelect doesn't work
If I want to bind server side control on keyUp event of this textboz then in this case can I use jQuery Autocomplete control?
where is the scrollbar?
and autocomplete.php???
this is great for php. i m trying to use with asp.
What about the script on autocomplete.php? Thanks.
pas de validation pas de validation pas de validation pas de validation pas de validation
- 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
- 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
what is the autocomplete.php supposed to return? in what format?
someone got to do to fix the problem in IE 7?
Thanks , this is such a useful Jquey
questo js si che tarella di brutto, non come quelle gran merdate che fa prototype!!!!!!
Thanks , this is useful Jquery
well, demonstration AJAX. GBU. n happy new years 2010.
example above doesn't work (FF 3)
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.
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.
its great work, can i view the source code for your autocomplete.php, thanks... i just wonder how u did it,
I need autocomplete.php format, Please Provide me, Thanks Jerry
How can i postback when i select any item from the AutoComplete dropdown ?
does it compatible with iis 7 ??
Can you tell me what the format of "autocomplete.php" is? I have tried <li> and "," but its not working. Thanks Abe
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.
please send me the code
I need mas information put data base scripts, thank you
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.
It is very good example
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!
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
If I enter "</" then my application breaks because it cant allow ?q=</ as parameter
If I enter "</" then my application breaks because it cant allow ?q=</ as parameter
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 } ); });
se ve bien en firefox , pero en internet explorer no sale bien?????
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)
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
Very nice Demo
on IE ,can not clear cache , help help///
Hi Abe, Use it in "$key|$val" format
no license info anywhere. is it free to use/change?
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
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?
Thanks - I shall have a play with this.
hello so i'm i have a problem with my autocompleter is doen't work at IE
Very Nice. Thanks.....
Nice plugin! thanks
Thank you, this works gr8!!
good yaarr
same problem don't work in ie is any solution?
Just exactly what I am looking for !
My friend got marry last Sunday :-)
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.
very good code. that's very good code in help. i like very much at this type code
thank you...... ajaxdaddy
it is not working in case if url is passed as $("#city").utocomplete("/search.action") what is the solution for this. Thanks in advance
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
I cannot figure out how to use same code or functions for two different field
nice script :)
Writing the strings "ea","es","en", "ec",...when there are words having an "e"+other letter, will cause -sometimes- the plugin to misfunction.
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.
Thanks for page :)
Nice plugin
test percobaan
hai how r u
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!
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.
nice tutorial for ajax
hey thanks for this
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
this is great site and good
Hi, nice work !! But I just wondering for exemple why max:4, in option does not work ?
OK OK I found it : this is : maxItemsToShow:4,
aahahahahahaha aahahahahahahaha ahahahahaha
ya this code is nice . but this auto complete not work in IE 7 and 8 please tell me any solutions
Really nice... Thank you so much...
How to use it with mysql? Thanks
Hi, Thanks a ton for the solution provided. This has been very helpful for me in solving problem faced with Autocomplete in my application.
this article saved my butt. thanks a million.
Very good example but I was a bit unsure where can I change the list of suggestions.
Excellent was searching this from hours!!
nice informative post, thanks for sharing`
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.
is any event available when we type a word which is not in the list (against unmatched word) ?
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!
Thank you for the great article. very nice.
gklj;/jm
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.
Its really very Nice One.
Just want to know how do you clear the cache of the autocompelete thanks
It's o.k..............................
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.
It's really, really helpfull. We will use it in the school to impress our teacher