/    Sign up×
Community /Pin to ProfileBookmark

<select> …

Copy linkTweet thisAlerts:
Jan 13.2007

[code]
<script type=”text/javascript”>

function show () {
var e = document.getElementById(‘select’);
var e2 = document.getElementById(‘input’);

for(i = 0; i< e.length; i++ ) {

if( e.options[i].innerHTML.substring(0,e2.length).indexOf(e2.value) != -1 ) {

var o = document.createElement(‘option’);
var t = document.createTextNode(e.options[i].value ) ;
o.appendChild(t) ;
e.appendChild(o) ;

}

}

// e.length = 0 ;

}
</script>

<input type=”text” id =”input” onkeyup =”show ()”>
<select id=”select”>
<option>airbag</option>
<option>airway</option>
<option>alamet</option>
<option>alem</option>
<option>alim</option>
<option>alican</option>
<option>alyanak</option>
<option>baki</option>
<option>bedi</option>
<option>cari</option>
<option>dad&#305;</option>
<option>dakika</option>
</select>

[/code]

When I entered a character ( for example a ) in the input element, <select> will be

<select>
<option>[color=red]a[/color]irbag</option>
<option>[color=red]a[/color]irway</option>
<option>[color=red]a[/color]lamet</option>
<option>[color=red]a[/color]lem</option>
<option>[color=red]a[/color]lim</option>
<option>[color=red]a[/color]lican</option>
<option>[color=red]a[/color]lyanak</option>
</select>

When I entered two character ( for example al ) in the input element, <select> will be

<select>
<option>[color=red]al[/color]amet</option>
<option>[color=red]al[/color]em</option>
<option>[color=red]al[/color]im</option>
<option>[color=red]al[/color]ican</option>
<option>[color=red]al[/color]yanak</option>
</select>

When I entered three character ( for example ali ) in the input element, <select> will be

<select>
<option>[color=red]ali[/color]m</option>
<option>[color=red]ali[/color]can</option>
</select>

How can I do?

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@konithomimoJan 13.2007 — Try searching the forum ? Many of us have already given this solution:

http://www.webdeveloper.com/forum/showthread.php?t=127971
Copy linkTweet thisAlerts:
@konithomimoJan 13.2007 — You can of course modify it with only a few lines of code to keep only the options you want and then remove the rest.
&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
var opts = new Array();

function changeVal(val)
{
var sel = document.getElementById('myselect');

sel.options.length=0;

for(var j=0;j&lt;opts.length;j++)
{
op = document.createElement('option');
op.text = opts[j];

if(val==opts[j].substring(0,val.length))
sel.options[sel.options.length]=op;
}
return;
}

function popArray()
{
var o = document.getElementById('myselect').options;
for(var i=0;i&lt;o.length;i++)
{
opts[i]=o[i].text;
}
return;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="popArray()"&gt;
&lt;form&gt;
&lt;input type="text" onkeyup="changeVal(this.value)"&gt;
&lt;select id="myselect"&gt;
&lt;option value="0"&gt;A
&lt;option value="1"&gt;AB
&lt;option value="2"&gt;ABC
&lt;option value="3"&gt;ABCD
&lt;/select&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@samanyoluauthorJan 13.2007 — Thanks. This is what I wanted.
Copy linkTweet thisAlerts:
@konithomimoJan 13.2007 — No problem. you may also want to keep the options values too, instead of just the text display.
Copy linkTweet thisAlerts:
@konithomimoJan 13.2007 — it would actually be better to just keep the entire object. Just use this code instead:

&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
var opts = new Array();

function changeVal(val)
{
var sel = document.getElementById('myselect');

sel.options.length=0;

for(var j=0;j&lt;opts.length;j++)
{
op = opts[j];

if(val==op.text.substring(0,val.length))
sel.options[sel.options.length]=op;
}
return;
}

function popArray()
{
var o = document.getElementById('myselect').options;
for(var i=0;i&lt;o.length;i++)
{
opts[i]=o[i];
}
return;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="popArray()"&gt;
&lt;form&gt;
&lt;input type="text" onkeyup="changeVal(this.value)"&gt;
&lt;select id="myselect"&gt;
&lt;option value="0"&gt;A
&lt;option value="1"&gt;AB
&lt;option value="2"&gt;ABC
&lt;option value="3"&gt;ABCD
&lt;/select&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@samanyoluauthorJan 15.2007 — Thanks.

When I entered a character ( for example A ) in the input element, <table> will be

<table id="myTable">

<tr>

<td>[color=red]A[/color]</td>

<td>[color=red]A[/color]B</td>

<td>[color=red]A[/color]BC</td>

<td>[color=red]A[/color]BCD</td>

</tr>

</table>

When I entered two characters ( for example AB ) in the input element, <table> will be

<table id="myTable">

<tr>

<td>[color=red]AB[/color]</td>

<td>[color=red]AB[/color]C</td>

<td>[color=red]AB[/color]CD</td>

</tr>

</table>

When I entered three characters ( for example ABC ) in the input element, <table> will be

<table id="myTable">

<tr>

<td>[color=red]ABC[/color]</td>

<td>[color=red]ABC[/color]D</td>

</tr>

</table>

How can I do?

This don't do it.
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript"&gt;
var arr = new Array();

function changeVal(val)
{
var e = document.getElementById('myTable');

e.getElementsByTagName('td').length=0;

for(var j=0;j&lt;arr.length;j++)
{
o = arr[j];

if(val==o.firstChild.data.substring(0,val.length))
e.getElementsByTagName('td')[e.getElementsByTagName('td').length]=o;
}
return;
}

function popArray()
{
var td = document.getElementById('myTable').getElementsByTagName('td');
for(var i=0;i&lt; td.length;i++)
{
arr[i]=td[i] ;
}
return;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="popArray()"&gt;

&lt;input type="text" onkeyup="changeVal(this.value)"&gt;
&lt;table id="myTable"&gt;
&lt;tr&gt;
&lt;td&gt;A&lt;/td&gt;
&lt;td&gt;AB&lt;/td&gt;
&lt;td&gt;ABC&lt;/td&gt;
&lt;td&gt;ABCD&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;


&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@konithomimoJan 15.2007 — That is because your example in post #1 is using a select object, where as your last post is using a table. The script is for a select object. you can howver alter it to display in a table if you want.
×

Success!

Help @samanyolu 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.19,
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,
)...