/    Sign up×
Community /Pin to ProfileBookmark

Highlight item in Select control.

Copy linkTweet thisAlerts:
Oct 09.2007

Hi, All

Ques: The functionality I want to incorporate is —-
There is one text box and below that there is one Select control.
When I will enter some text in text box e.g. B or Bo then the item present in Select control with starting letter B or Bo should get highlighted and come to first position in Select control. It’s functionality like textbox *** dropdown list in 1.1 framework but I have to design this control in 2.0 framework.

please help me if any one knows how to do this?

Thanks.

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebnerdOct 09.2007 — Like this:

<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xml:lang="en" lang="en"&gt;
&lt;head&gt;
&lt;title&gt; new document &lt;/title&gt;

&lt;script type="text/javascript"&gt;
//&lt;![CDATA[

function search(inp){

<i> </i>var txt=inp.value;
<i> </i>var re=new RegExp('^'+txt,'i');
<i> </i>var sel=document.getElementById('data');
<i> </i>var found=[];
<i> </i>var remain=[];

<i> </i>for(i=0;i&lt;sel.options.length;i++){
<i> </i> if(re.test(sel.options[i].value)){
<i> </i> found.push(sel.options[i].cloneNode(true));
<i> </i> }else{
<i> </i> remain.push(sel.options[i].cloneNode(true));
<i> </i> }
<i> </i>}

<i> </i>sel.options.length=0;

<i> </i>found=found.concat(remain);

<i> </i>for(i=0;i&lt;found.length;i++){
<i> </i> sel.options[sel.options.length]=found[i];
<i> </i>}

<i> </i> sel.selectedIndex=0;

}

//]]&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body lang="en"&gt;

&lt;form method="post" action="javascript:false"&gt;
&lt;fieldset&gt;

&lt;label for="text"&gt;&lt;input type="text" name="text" id="text" onkeydown="search(this)" /&gt;

&lt;select name="data" id="data"&gt;
&lt;option value="this"&gt;this&lt;/option&gt;
&lt;option value="is"&gt;a&lt;/option&gt;
&lt;option value="my"&gt;my&lt;/option&gt;
&lt;option value="test"&gt;test&lt;/option&gt;
&lt;/select&gt;

&lt;/fieldset&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;

Copy linkTweet thisAlerts:
@KorOct 09.2007 — <i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
function sel(obj){
if(obj.value.length==0){return}
var f=obj.form, opt=f['mySel'].options, i=0, regE=new RegExp('^'+obj.value,'i'),o;
while(o=opt[i++]){
if(regE.test(o.value)){o.selected=true;break}
}
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form&gt;
&lt;input type="text" onkeyup="sel(this)"&gt;
&lt;select name="mySel"&gt;
&lt;option value="B"&gt;B&lt;/option&gt;
&lt;option value="Bo"&gt;Bo&lt;/option&gt;
&lt;option value="Boo"&gt;Boo&lt;/option&gt;
&lt;option value="Bool"&gt;Bool&lt;/option&gt;
&lt;option value="Boole"&gt;Boole&lt;/option&gt;
&lt;option value="Boolea"&gt;Boolea&lt;/option&gt;
&lt;option value="Boolean"&gt;Boolean&lt;/option&gt;
&lt;/select&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@WebnerdOct 09.2007 — KOR, I think you and I have duplicated our efforts with the exception that I took this literally:


should get highlighted and come to first position in Select contro
[/quote]

And I physically move the option(s) to the top.
Copy linkTweet thisAlerts:
@KorOct 09.2007 — KOR, I think you and I have duplicated our efforts with the exception that I took this literally:



And I physically move the option(s) to the top.[/QUOTE]
Yeap... But I was thinking that literally moving would be of no use, thus I presumed it was about the selection of the option, not it's moving ?

I see we both have used, normally, a Regular Expression, which is the base of a good approach, I guess...?
Copy linkTweet thisAlerts:
@KorOct 09.2007 — Webnerd, I guess you could have simply used [B]insertBefore()[/B] instead of cloning the option...
Copy linkTweet thisAlerts:
@KorOct 09.2007 — like...
<i>
</i>&lt;script type="text/javascript"&gt;
function sel(obj){
if(obj.value.length==0){return}
var f=obj.form, opt=f['mySel'].options, i=0, regE=new RegExp('^'+obj.value,'i'),o;
while(o=opt[i++]){
if(regE.test(o.value)){f['mySel'].insertBefore(o,opt[0]);o.selected=true;break}
}
}
&lt;/script&gt;

But, once again, I don't think [B]parag10 [/B] wants a "move"... :-)
Copy linkTweet thisAlerts:
@parag10authorOct 09.2007 — Hi,

Thanks!!!!!!!!!!!!!!!!.

It's working fine.
×

Success!

Help @parag10 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...