PDA

Click to See Complete Forum and Search --> : A short list from a long one

Webskater
09-25-2003, 06:53 AM
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.
pyro
09-25-2003, 08:22 AM
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>
Khalid Ali
09-25-2003, 08:25 AM
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
Webskater
09-25-2003, 02:46 PM
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.
pyro
09-25-2003, 02:52 PM
Certainly.

new RegExp - Obviously, this means we are creating a new regexp object.

^"+frm.searchval.value+"" - 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.

"i" - 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. :)
Webskater
09-25-2003, 02:59 PM
No, I think I understand the rest. Thanks again.
Webskater
09-25-2003, 03:03 PM
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.
pyro
09-25-2003, 03:11 PM
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.
Webskater
09-26-2003, 05:35 AM
I understand now. Thanks again, Pyro.
pyro
09-26-2003, 07:06 AM
You bet... :)
karn
12-18-2003, 05:24 PM
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.
fredmv
12-18-2003, 05:27 PM
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.