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.

stmayesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

stmayesAuthor 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.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

hieloCommented:
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

0
stmayesAuthor 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.
0
Carl BohmanCommented:
@stmayes
I took a look at the link you posted.  Documentation for that particular code leaves much to be desired.  However, I did find source code that would help:
http://bugs.dojotoolkit.org/browser/dijit/trunk/form/ComboBox.js

Note lines 87-96 that refer to a queryExpr property.  The value you want seems to be "*${0}*".  The following code (found on the web) shows one example of how to set this property during instantiation.
new dijit.form.FilteringSelect({
name = "region";
autoComplete = false;
hasDownArrow = false;
labelAttr = "name";
queryExpr = "${0}";
store = new dojox.data.QueryReadStore({url:'/query/regions'});
}, myNode);

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
hieloCommented:
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.
0
stmayesAuthor 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

0
stmayesAuthor 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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.