We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Ajax Select Autocomplete

stmayes
stmayes asked
on
Medium Priority
908 Views
Last Modified: 2012-05-07
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.

Comment
Watch Question

Author

Commented:
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.
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
download the YUI  code:
http://www.java2s.com/Code/JavaScriptDownload/yui.zip

extract the contents of the zip file and look for examples/autocomplete/states_jsarray.html and look for the example to the end of the file. Modify the example so it looks as follows:
...
// 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!

Open in new window

Author

Commented:
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.
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
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.

Author

Commented:
@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
<select id="name" dojoType="dijit.form.FilteringSelect" queryExpr="*${0}*" autoComplete="false">

Open in new window

Author

Commented:
@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.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.