[jQuery] modifying autocomplete behavior

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:st1="urn:schemas-microsoft-com:office:smarttags" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<o:SmartTagType
namespaceuri="urn:schemas-microsoft-com:office:smarttags" name="State"/>
<o:SmartTagType namespaceuri="urn:schemas-microsoft-com:office:smarttags"
name="City"/>
<o:SmartTagType namespaceuri="urn:schemas-microsoft-com:office:smarttags"
name="place"/>
<o:SmartTagType namespaceuri="urn:schemas-microsoft-com:office:smarttags"
name="PersonName"/>

<style>

</style>

</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
Dan that is a great suggestion! I also
appreciate your thorough reply – on other lists I might have been told my
idea was stupid but not offered any real help. jQuerians are such a
friendly race…<o:p></o:p>
<o:p> </o:p>
Thanks!<o:p></o:p>
<o:p> </o:p>
<div>
<div class=MsoNormal align=center style='text-align:center'>
<hr size=3 width="100%" align=center tabindex=-1>
</div>
From:
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] On Behalf Of Dan G. Switzer, II
Sent: Wednesday, March 21, 2007
10:05 AM
To: '<st1:PersonName w:st="on">jQuery
Discussion.</st1:PersonName>'
Subject: Re: [jQuery] modifying
autocomplete behavior<o:p></o:p>
</div>
<o:p> </o:p>
Paul,<o:p></o:p>
<o:p> </o:p>
IMO, pulling up all the entries defeats
the purpose of an autocomplete (not to mention if you have more than just a few
options—it’ll prevent a scrolling nightmare.)<o:p></o:p>
<o:p> </o:p>
The way that I’ve addressed this
problem in the past is by setting the Autocomplete matchSubset option to
true/1. <o:p></o:p>
<o:p> </o:p>
On the backend, I design my queries to
pull out matches the start off exactly the way the user typed the phrase in
first and then return results where the string is anywhere else in the string.<o:p></o:p>
<o:p> </o:p>
So, if the user was searching for Cities
in <st1:place w:st="on"><st1:State w:st="on">Ohio</st1:State></st1:place> and
typed in the letters “Fi”, the results in the drop down box would
look like:<o:p></o:p>
<o:p> </o:p>
Findley<o:p></o:p>
Blissfield<o:p></o:p>
<st1:place w:st="on"><st1:City w:st="on">Brookfield</st1:City></st1:place><o:p></o:p>
Canfield<o:p></o:p>
Chatfield<o:p></o:p>
<st1:place w:st="on">Deerfield</st1:place><o:p></o:p>
<st1:place w:st="on"><st1:City w:st="on">Defiance</st1:City></st1:place><o:p></o:p>
<st1:place w:st="on">East Springfield</st1:place><o:p></o:p>
Farifield<o:p></o:p>
<st1:place w:st="on"><st1:City w:st="on">Greenfield</st1:City></st1:place><o:p></o:p>
<o:p> </o:p>
This puts the most logical choices at top,
but perimeter options will still show up. <o:p></o:p>
<o:p> </o:p>
The basic SQL idea is to union 2 queries
together, where the first query does a LIKE ‘string%’ and the
second query does a LIKE ‘%string%’—and excludes all matches
from the first query. You’ll also want to add a alias column that assigns
a static value to each query, that way you can properly order by the queries.<o:p></o:p>
<o:p> </o:p>
Example:<o:p></o:p>
select<o:p></o:p>

cityId, name, 1 as exactMatch<o:p></o:p>
from<o:p></o:p>

city<o:p></o:p>
where<o:p></o:p>

name like ‘#url.q#%’<o:p></o:p>
<o:p> </o:p>
union<o:p></o:p>
<o:p> </o:p>
select<o:p></o:p>

cityId, name, 0 as exactMatch<o:p></o:p>
from<o:p></o:p>

city<o:p></o:p>
where<o:p></o:p>

name like ‘%#url.q#%’<o:p></o:p>
and<o:p></o:p>

cityId not in (<o:p></o:p>
select<o:p></o:p>

 cityId<o:p></o:p>
from<o:p></o:p>

 city<o:p></o:p>
where<o:p></o:p>

 name like
‘#url.q#%’<o:p></o:p>
)<o:p></o:p>
<o:p> </o:p>
order by<o:p></o:p>

exactMatch desc, name asc<o:p></o:p>
<o:p> </o:p>
Hope this help!<o:p></o:p>
<o:p> </o:p>
-Dan<o:p></o:p>
<o:p> </o:p>
<div style='border:none;border-left:solid blue 1.5pt;padding:0in 0in 0in 4.0pt'>
<div>
<div class=MsoNormal align=center style='text-align:center'>
<hr size=2 width="100%" align=center tabindex=-1>
</div>
From:
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] On Behalf Of Paul
Sent: Wednesday, March 21, 2007
12:11 PM
To: '<st1:PersonName w:st="on">jQuery
Discussion.</st1:PersonName>'
Subject: [jQuery] modifying
autocomplete behavior<o:p></o:p>
</div>
<o:p> </o:p>
I’m using the pengoworks autocomplete plugin (<a
href="http://www.pengoworks.com/workshop/jquery/autocomplete.htm">http://www.pengoworks.com/workshop/jquery/autocomplete.htm</a>)
and would like to make an enhancement. Unfortunately I’m not sure
where to begin…<o:p></o:p>
<o:p> </o:p>
I’m using the autocomplete function within an intranet
application. When the staff knows which product name they wish to select
it works well, but there are a few times when an infrequently-used product
needs to be selected, and they may not know the first few characters to
populate the list. <o:p></o:p>
<o:p> </o:p>
I would like to modify the plugin so that pressing
“escape” returns the autocomplete result populated with all
possible records which users can scroll through. Do any of you know what
I might need to do to get started?<o:p></o:p>
<o:p> </o:p>
-Paul<o:p></o:p>
</div>
</div>
</body>
</html>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Topic Participants
montare

[jQuery] modifying autocomplete behavior

[jQuery] modifying autocomplete behavior

Topic Participants

montare