/    Sign up×
Community /Pin to ProfileBookmark

A short list from a long one

Copy linkTweet thisAlerts:
Sep 25.2003

I have a list of employees in an array.
I want to give users the ability to quickly find the employee they want by typing the first one, two, three etc letters of their name in a text box and have the names that match appear in a list so that the correct one can be selected.
For example:
If I type “G” into the search field the names George Jones, Graham Smith and Greg Miller might appear in the list. When I type another character – so I now have “GR” in the search box – the list reduces to Graham Smith and Greg Miller.
I think I can just about figure out how to loop through the array once looking for a first letter that begins with the Search letter but after that …?
Any help much appreciated.

to post a comment
JavaScript

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@pyroSep 25.2003 — It's fairly simply done, with regexp:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Simple search demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
function searchDiv(frm) {
ary = new Array("George Jones", "Graham Smith", "Greg Miller")
re = new RegExp("^"+frm.searchval.value+"", "i");
matches = new Array();
for (i in ary) {
if (ary[i].match(re)) {
matches[matches.length] = ary[i];
}
}
if (matches.length > 0) {
document.getElementById("searchbox").innerHTML = "";
for (i in matches) {
document.getElementById("searchbox").innerHTML += matches[i]+"<br>";
}
}
}
</script>
</head>
<body>
<form action="" onsubmit="searchDiv(this); return false;">
<p><input type="text" name="searchval" onkeyup="searchDiv(this.form);">
<input type="submit" value="Search"></p>
</form>
<div id="searchbox"></div>
</body>
</html>
Copy linkTweet thisAlerts:
@Khalid_AliSep 25.2003 — Well you have the idea..you will need to read each character in the array elements and then print all the names who's first characters are typed by the user already,you don't have to match the rest of the chars bu the ones that are already typed by the user
Copy linkTweet thisAlerts:
@WebskaterauthorSep 25.2003 — Thank you both for your answers and thanks Pyro for a fully working example. I was hoping for a pointer in the right direction, I did not expect to get the code written. Thanks - as I am sure you know - it works perfectly.

I vaguely understand Javascript but regular expressions leave me baffled. Could anyone tell me exactly what:

re = new RegExp("^"+frm.searchval.value+"", "i");

means. Thanks again.
Copy linkTweet thisAlerts:
@pyroSep 25.2003 — Certainly.

[b]new RegExp[/b] - Obviously, this means we are creating a new regexp object.

[b]^"+frm.searchval.value+""[/b] - This part tells it to begin matching at the beginning of the string (the ^) and the frm.searchval.value is the value that is in our search box.

[b]"i"[/b] - The "i" is the case-insensative tag, which means that if we type all lowercase letters, it will still match their name if it is in uppercase.

Let me know if you need anything else explained, and I'd be happy to do so. ?
Copy linkTweet thisAlerts:
@WebskaterauthorSep 25.2003 — No, I think I understand the rest. Thanks again.
Copy linkTweet thisAlerts:
@WebskaterauthorSep 25.2003 — Now I think about it there is something else.

If I call a function like this

GetNames('A')

or

GetNames('K') etc.

then if the function looks something like

function GetNames(Initial)

{

}

how, in the function would I say:

if (the lowercase or uppercase version of the letter I have passed into the function = somevariable)

ie. If I pass the letter 'A' into the function how can I tell the function to match A regardless of whether it is upper or lower case.

Thanks again.
Copy linkTweet thisAlerts:
@pyroSep 25.2003 — Just swap out the frm.searchval.value for the variable that you passed:

re = new RegExp("^"+somevar+"", "i");

I've got to run, but if you don't get it by the time I get back, I'll show you how you can make it so you can pass another paramater to the function.
Copy linkTweet thisAlerts:
@WebskaterauthorSep 26.2003 — I understand now. Thanks again, Pyro.
Copy linkTweet thisAlerts:
@pyroSep 26.2003 — You bet... ?
Copy linkTweet thisAlerts:
@karnDec 18.2003 — Hi,

Thanks for the following code but i have the similar task that i have 5 text boxes sothat when i enter say "ACS" in one textbox then it has to fetch the ACS Values from the database and display in the returned values in another list box in the samepage.

Please suggest me by sending the code because i am totally fresh to Javascript.

I appreciates..

Thanks

Karn.
Copy linkTweet thisAlerts:
@fredmvDec 18.2003 — Welcome to the forums.

What you are trying to do cannot be done with client-side JavaScript alone since it can't query a database. You'll need a server-side language for that.
×

Success!

Help @Webskater 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.20,
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,
)...