/    Sign up×
Community /Pin to ProfileBookmark

dynamic list box thing!

Copy linkTweet thisAlerts:
Oct 20.2005

Hi there anyone know if there is a script knocking about that can do this.

I have a list of customers – say 200 of them – and I want a user to be able to type in letters in textbox and have the list of matching customers to be displayed.

Not sure if this makes sense, so here is an example.

[B]Customers List[/B]
abc123
abd123
abc111

if the user typed in “[B]a[/B]” all 3 customers will be shown
if the user typed in “[B]abc[/B]” just the 2 starting abc will be shown.

I know I could do this server side, but can it be done on the client side only?

I think I have seen something similar on google, but can’t remember where.

Thanks in advance

Richard

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@MjhLkwdOct 20.2005 — [CODE]<HTML>
<Head>
<Script type="text/javascript">

var smartOptions = new Array();

var allOptions = new Array();
allOptions[0] = "Babich, Timothy";
allOptions[1] = "Cahoon, Ron";
allOptions[2] = "Atwood, James";
allOptions[3] = "Cannon, Edith";
allOptions[4] = "Allen, Mike";
allOptions[5] = "Bailey, Mary";
allOptions[6] = "Aaron, Daniel";
allOptions[7] = "Alexander, Allison";
allOptions[8] = "Baker, George";
allOptions[9] = "Conner, Anthony";

function buildList(isForm,nArray){

for (i=0; i<nArray.length; i++)
{
nOption = document.createElement('option');
isData = document.createTextNode(nArray[i]);
nOption.setAttribute('value',nArray[i]);
nOption.appendChild(isData);
isForm.isList.appendChild(nOption);
}
}

function buildSmartOptions(isForm){

matchStr = isForm.isText.value.toLowerCase();
if (matchStr != "")
{
smartOptions.length = 0;
n = 0;
endClip = matchStr.length;
for (i=0; i<allOptions.length; i++)
{
if (matchStr == allOptions[i].slice(0,endClip).toLowerCase())
{smartOptions[n++] = allOptions[i]}
}
isForm.isList.length = 1;
for (i=0; i<smartOptions.length; i++)
{
buildList(isForm,smartOptions);
}
if (smartOptions.length > 5){isForm.isList.size=6}
else {isForm.isList.size = smartOptions.length+1}
}
if (matchStr == ""){init()}
}

function getChoice(isChoice){

alert(isChoice);
}

function init(){

isForm = document.forms.Form1;
isForm.isList.length = 1;
isForm.isList.size = 1;
allOptions.sort();
buildList(isForm,allOptions);
isForm.isText.focus();
}

window.onload=init;

</Script>
</Head>
<Body>
<Form name='Form1'>
<Table align='center' cellspacing='0' cellpadding='2' style='border:solid black 1px;font-family:Arial;font-weight:bold;font-size:12pt;width:200px;height:110px;background-color:lightyellow'>
<THead>
<TR><TH colspan='2' height='25' bgcolor='lightblue'>Name List</TH></TR>
</THead>
<TBody>
<TR>
<TD align='right' style='font-size:11pt'>Trim At:</TD>
<TD><input type='text' name='isText' size='15' onkeyup="buildSmartOptions(this.form)"></TD>
</TR>
<TR>
<TD align='center' colspan='2'>
<Select name='isList' onchange="getChoice(this.value)" style='width:151px'>
<option selected value='null'>Make a Selection</option>
</Select>
</TD>
</TR>
</TBody>
</Table>
</Form>
</Body>
</HTML>[/CODE]
Copy linkTweet thisAlerts:
@squarefishauthorOct 20.2005 — Mike

That is fantastic thank you very much!

Richard
Copy linkTweet thisAlerts:
@MjhLkwdOct 20.2005 — You're welcome, Richard. Take care.
×

Success!

Help @squarefish 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.18,
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,
)...