Ajax Select Autocomplete
Hi,
I need an autocomplete component that will search the entire string not just the start!!
I have an array of places (Hammersmith and Fulham, City of London, Kensington and Chelsea, Kingston upon Thames).
If I was to search for them in all the autocomplete select boxes most would not work. If I was looking for "London", it wouldn't work because the string doesn't start with "London", it's starts with "City", similarly I'd struggle looking for "Chelsea".
Can anyone suggest a component that would work. Otherwise I'll have to make one.
The array is local in JS. I do not want to have to make dozens of AJAX database calls.
I need an autocomplete component that will search the entire string not just the start!!
I have an array of places (Hammersmith and Fulham, City of London, Kensington and Chelsea, Kingston upon Thames).
If I was to search for them in all the autocomplete select boxes most would not work. If I was looking for "London", it wouldn't work because the string doesn't start with "London", it's starts with "City", similarly I'd struggle looking for "Chelsea".
Can anyone suggest a component that would work. Otherwise I'll have to make one.
The array is local in JS. I do not want to have to make dozens of AJAX database calls.
ASKER
Thanks itkamaraj. I've had a look at the links but I do not think they help me. The autosuggest box suffers from the same problem as others. If I was to search find "New York" by searching for "york" it doesn't work. Also the .NET solution is not for me. I work with Unix and want to stick with Java/ PHP.
The other option is to do lots of MySQL queries like SELECT * FROM cities WHERE name LIKE "%{$name}%". I want to achieve the same result but using a local JS array.
The other option is to do lots of MySQL queries like SELECT * FROM cities WHERE name LIKE "%{$name}%". I want to achieve the same result but using a local JS array.
download the YUI code:
http://www.java2s.com/Code/JavaScriptDownload/yui.zip
extract the contents of the zip file and look for examples/autocomplete/stat
http://www.java2s.com/Code/JavaScriptDownload/yui.zip
extract the contents of the zip file and look for examples/autocomplete/stat
...
// Instantiate first JS Array DataSource
oACDS = new YAHOO.widget.DS_JSArray(statesArray);
/* the following sets the search type that will be performed.
when false, then searches array for every item that "startsWith" typed value when true, then search array for every item that "contains" typed value. When not specified, the default value is false */
oACDS.queryMatchContains = true;
// Instantiate first AutoComplete
oAutoComp = new YAHOO.widget.AutoComplete('statesinput','statescontainer', oACDS);
oAutoComp.queryDelay = 0;
oAutoComp.prehighlightClassName = "yui-ac-prehighlight";
/* when typeAhead==true, the input element is prefilled with first item in list of matches. When using "queryMatchContains" and typeAhead=true, if you type "n" to search the list of states, then all the states that contain an "n" will match the query and the first item ("Arizona" )will be prefilled. This would be a problem if you are searching for "New York" (if this is not clear to you yet then try setting both queryMatchContains AND typeAhead to true ). To avoid this problem set typeAhead = false. */
oAutoComp.typeAhead = false;
oAutoComp.useShadow = true;
...
I have tested this and it works!
ASKER
Sorry, one thing I forgot to say was that I also need a drop-down element, so that the user can browse the options as well.
What I really want is something like http://dojocampus.org/explorer/#Dijit_Form%20Controls_Filtering%20Select_Basic but has the option of matching "wildcards" in the string options.
What I really want is something like http://dojocampus.org/explorer/#Dijit_Form%20Controls_Filtering%20Select_Basic but has the option of matching "wildcards" in the string options.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
On the example link you posted I don't see any autocomplete feature. I only see a read-only field that gets populated upon change of another field. That is not "autocomplete". So you either looked at another example and pasted the wrong link, or are describing the wrong thing.
ASKER
@hielo, that was meant to be an example similar to want I want. Everyone elses suggestions were for autosuggest textboxes... I wanted autosuggest select box.
I ended up using the Dojo Framwork and the Dijit Filtering Select Box. The key thing below is queryExpr="*${0}*"... this adds the match any part of the string query....
This is actually quite a powerful UI tool. You can browse the output by clicking the down arrow or search by typing.
See http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/_autoComplete.html?testWidget=dijit.form.ComboBox
I ended up using the Dojo Framwork and the Dijit Filtering Select Box. The key thing below is queryExpr="*${0}*"... this adds the match any part of the string query....
This is actually quite a powerful UI tool. You can browse the output by clicking the down arrow or search by typing.
See http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/_autoComplete.html?testWidget=dijit.form.ComboBox
<select id="name" dojoType="dijit.form.FilteringSelect" queryExpr="*${0}*" autoComplete="false">ASKER
@bounsy
I have just read your post. I solved the problem with a near identical solution the morning of your post. Many thanks for your input nevertheless.
I have just read your post. I solved the problem with a near identical solution the morning of your post. Many thanks for your input nevertheless.
http://www.java2s.com/Code/JavaScript/Ajax-Layer/AutoCompleteWidgetJSArrayExample.htm