Solved

Ajax Select Autocomplete

Posted on 2009-07-02
10
872 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.

0
Comment
Question by:stmayes
  • 4
  • 2
  • 2
  • +2
10 Comments
 
LVL 23

Expert Comment

by:Kamaraj Subramanian
ID: 24761872
0
 

Author Comment

by:stmayes
ID: 24761973
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
 
LVL 13

Expert Comment

by:Carl Bohman
ID: 24767391
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 2

Expert Comment

by:ganesh_gns
ID: 24776568
0
 
LVL 82

Expert Comment

by:hielo
ID: 24778684
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
 

Author Comment

by:stmayes
ID: 24812065
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
 
LVL 13

Accepted Solution

by:
Carl Bohman earned 500 total points
ID: 24815330
@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
 
LVL 82

Expert Comment

by:hielo
ID: 24839716
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
 

Author Comment

by:stmayes
ID: 24840006
@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
 

Author Comment

by:stmayes
ID: 24840038
@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

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question