Solved

Ajax Select Autocomplete

Posted on 2009-07-02
10
868 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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)

705 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now