PDA

View Full Version : Type ahead function?

ventura
08-17-2002, 12:50 AM
I have a drop down that has about 300 clients names in it. Just the R's themselves have about 30 or so client names.

In IE, when i type the letter "r" it takes me to the first client name that starts with an "r". but i want to be able to continue to type the rest of the client name so that the other client name's will show up.

for example,

when i type: r
i want it to go to: radical

when i type: ran
i want it to go to: randy

when i type: re
i want it to go to: renaissance
dsvg
08-17-2002, 03:34 AM
There is a reason that keystrokes are not cumulative. What if you type 'r' initially intending to go to 'randy' but then change your mind and decide to choose 'andy'. Most people instinctively know that they should type 'a' but, if dropdown menus were programmed to behave as you suggest, the selection would jump to the first option beginning with the string 'ra'.

I guess with some thought the behaviour you have asked for could be made to work (although it could be a pain to get it to work cross-browser), but before going to all the effort do you really want to create something that could very well confuse and irritate your users?
x_goose_x
08-17-2002, 05:14 AM
So far works in IE. Press delete to move back one character.


<html>

<head>

<script>

w = "";

function keyp(e) {
if (document.layers) {
k = e.which;
}else{
k = window.event.keyCode;
}
if (k==46) {
if (w.length!=0) {
w = w.substring(0,w.length-1);
}
}else{
w += String.fromCharCode(k).toLowerCase();
}
for (x=0; x<document.form1.dropmenu.options.length; x++) {
z = document.form1.dropmenu.options[x].text.substring(0,w.length).toLowerCase();
if (w==z) {
document.form1.dropmenu.options[x].selected=true;
break;
}
}
}

</script>

</head>

<body>

<form name="form1">
<select size="1" name="dropmenu" onkeydown="keyp(event); return false;">
<option>Andrew Lesnie</option>
<option>Andy Serkis</option>
<option>Barrie M. Osborne</option>
<option>Bernard Hill</option>
<option>Billy Boyd</option>
<option>Bob Weinstein</option>
<option>Cate Blanchett</option>
<option>Christopher Lee</option>
<option>David Wenham</option>
<option>Dominic Monaghan</option>
<option>Elijah Wood</option>
<option>Enya</option>
<option>Fran Walsh</option>
<option>Grant Major</option>
<option>Harvey Weinstein</option>
<option>Howard Shore</option>
<option>Hugo Weaving</option>
<option>Ian Holm</option>
<option>Ian McKellen</option>
<option>J.R.R. Tolkien</option>
<option>John Rhys-Davies</option>
<option>Karl Urban</option>
<option>Liv Tyler</option>
<option>Mark Ordesky</option>
<option>Marton Csokas</option>
<option>Michael Lynne</option>
<option>Miranda Otto</option>
<option>Ngila Dickson</option>
<option>Orlando Bloom</option>
<option>Peter Jackson</option>
<option>Philippa Boyens</option>
<option>Robert Shaye</option>
<option>Sean Astin</option>
<option>Sean Bean</option>
<option>Tim Sanders</option>
<option>Viggo Mortensen</option>
</select>
</form>

</body>

</html>
x_goose_x
08-17-2002, 05:51 AM
Not quite as smooth, but works in ns6:


<html>

<head>

<script>

w = "";

function keyp(e) {
if (document.getElementById&&!document.all) {
k = e.which;
}else if (document.all) {
k = window.event.keyCode;
}
if (k==46) {
if (w.length!=0) {
w = w.substring(0,w.length-1);
}
}else{
w += String.fromCharCode(k).toLowerCase();
}
for (x=0; x<document.form1.dropmenu.options.length; x++) {
z = document.form1.dropmenu.options[x].text.substring(0,w.length).toLowerCase();
if (w==z) {
document.form1.dropmenu.options[x].selected=true;
q = false;
break;
}else{
q = true;
}
}
if (q) {
w=w.substring(0,w.length-1);
}
}

</script>

</head>

<body>

<form name="form1">
<select size="1" name="dropmenu" onkeydown="return false;" onkeyup="keyp(event); return false;">
<option>Andrew Lesnie</option>
<option>Andy Serkis</option>
<option>Barrie M. Osborne</option>
<option>Bernard Hill</option>
<option>Billy Boyd</option>
<option>Bob Weinstein</option>
<option>Cate Blanchett</option>
<option>Christopher Lee</option>
<option>David Wenham</option>
<option>Dominic Monaghan</option>
<option>Elijah Wood</option>
<option>Enya</option>
<option>Fran Walsh</option>
<option>Grant Major</option>
<option>Harvey Weinstein</option>
<option>Howard Shore</option>
<option>Hugo Weaving</option>
<option>Ian Holm</option>
<option>Ian McKellen</option>
<option>J.R.R. Tolkien</option>
<option>John Rhys-Davies</option>
<option>Karl Urban</option>
<option>Liv Tyler</option>
<option>Mark Ordesky</option>
<option>Marton Csokas</option>
<option>Michael Lynne</option>
<option>Miranda Otto</option>
<option>Ngila Dickson</option>
<option>Orlando Bloom</option>
<option>Peter Jackson</option>
<option>Philippa Boyens</option>
<option>Robert Shaye</option>
<option>Sean Astin</option>
<option>Sean Bean</option>
<option>Tim Sanders</option>
<option>Viggo Mortensen</option>
</select>
</form>

</body>

</html>
nolachrymose
08-17-2002, 01:22 PM
Actually, I'd suggest that you would have a search box where the user could enter it, so in case they made a mistake, they'd know what they typed so that they could change it easily. Here's the code:

<html>
<head>
<title>Searching a Dropdown List</title>
<script type="text/javascript">
function searchDropdown(searchStr,ddObj) {
var index = ddObj.getElementsByTagName("option");
for(var i = 0; i < index.length; i++) {
if(index[i].firstChild.nodeValue.toLowerCase().substring(0,searchStr.length) == searchStr.toLowerCase()) {
index[i].selected = true;
break;
}
}
}
</script>
</head>
<body>
<form>
<input type="text" name="search" onkeyup="searchDropdown(this.value,this.parentNode.dd);" />
<select name="dd">
<option>Andrew Lesnie</option>
<option>Andy Serkis</option>
<option>Barrie M. Osborne</option>
<option>Bernard Hill</option>
<option>Billy Boyd</option>
<option>Bob Weinstein</option>
<option>Cate Blanchett</option>
<option>Christopher Lee</option>
<option>David Wenham</option>
<option>Dominic Monaghan</option>
<option>Elijah Wood</option>
<option>Enya</option>
<option>Fran Walsh</option>
<option>Grant Major</option>
<option>Harvey Weinstein</option>
<option>Howard Shore</option>
<option>Hugo Weaving</option>
<option>Ian Holm</option>
<option>Ian McKellen</option>
<option>J.R.R. Tolkien</option>
<option>John Rhys-Davies</option>
<option>Karl Urban</option>
<option>Liv Tyler</option>
<option>Mark Ordesky</option>
<option>Marton Csokas</option>
<option>Michael Lynne</option>
<option>Miranda Otto</option>
<option>Ngila Dickson</option>
<option>Orlando Bloom</option>
<option>Peter Jackson</option>
<option>Philippa Boyens</option>
<option>Robert Shaye</option>
<option>Sean Astin</option>
<option>Sean Bean</option>
<option>Tim Sanders</option>
<option>Viggo Mortensen</option>
</select>
</form>
</body>
</html>

Note: works in IE 5.5+ and NS6+.

Hope that helps!

Happy coding! :)
Stripe-man
05-05-2006, 07:38 AM
This is great and simple.. but it does not work with alphanumeric chars.. any suggestions ?
djmonkey1
09-20-2006, 07:30 PM
Actually, I'd suggest that you would have a search box where the user could enter it, so in case they made a mistake, they'd know what they typed so that they could change it easily. Here's the code:

<html>
<head>
<title>Searching a Dropdown List</title>
<script type="text/javascript">
function searchDropdown(searchStr,ddObj) {
var index = ddObj.getElementsByTagName("option");
for(var i = 0; i < index.length; i++) {
if(index[i].firstChild.nodeValue.toLowerCase().substring(0,searchStr.length) == searchStr.toLowerCase()) {
index[i].selected = true;
break;
}
}
}
</script>
</head>
<body>
<form>
<input type="text" name="search" onkeyup="searchDropdown(this.value,this.parentNode.dd);" />
<select name="dd">
<option>Andrew Lesnie</option>
<option>Andy Serkis</option>
<option>Barrie M. Osborne</option>
<option>Bernard Hill</option>
<option>Billy Boyd</option>
<option>Bob Weinstein</option>
<option>Cate Blanchett</option>
<option>Christopher Lee</option>
<option>David Wenham</option>
<option>Dominic Monaghan</option>
<option>Elijah Wood</option>
<option>Enya</option>
<option>Fran Walsh</option>
<option>Grant Major</option>
<option>Harvey Weinstein</option>
<option>Howard Shore</option>
<option>Hugo Weaving</option>
<option>Ian Holm</option>
<option>Ian McKellen</option>
<option>J.R.R. Tolkien</option>
<option>John Rhys-Davies</option>
<option>Karl Urban</option>
<option>Liv Tyler</option>
<option>Mark Ordesky</option>
<option>Marton Csokas</option>
<option>Michael Lynne</option>
<option>Miranda Otto</option>
<option>Ngila Dickson</option>
<option>Orlando Bloom</option>
<option>Peter Jackson</option>
<option>Philippa Boyens</option>
<option>Robert Shaye</option>
<option>Sean Astin</option>
<option>Sean Bean</option>
<option>Tim Sanders</option>
<option>Viggo Mortensen</option>
</select>
</form>
</body>
</html>

Note: works in IE 5.5+ and NS6+.

Hope that helps!

Happy coding! :)

That's pretty sweet- anyone know if it's possible to add in more advanced search capability to this, say for instance if you typed in "Tolkien" it would select "J.R.R. Tolkien"?
djmonkey1
09-21-2006, 01:39 AM
That's pretty sweet- anyone know if it's possible to add in more advanced search capability to this, say for instance if you typed in "Tolkien" it would select "J.R.R. Tolkien"?

Maybe with regular expressions? I'm not sure if those can be used for this kind of thing though.

Also, what about if the option names had spaces in front of the name? For instance instead of <option>Elijah Wood</option> you would have <option> Elijah Wood</option> or <option>&nbsp;&nbsp;&nbsp;Elijah Wood</option>

It seems like the JavaScript ignores any selection that starts with an empty space.
pranay
10-23-2006, 09:42 AM
I am using the piece of code 'type ahead' (without the search box). It is working fine. I have used the backspace (unicode 8) to go a level up.

Since an upgrade the backspace does not work anymore. When you press backspace the browser goes one page back.

Does anyone have a clue how to avoid this?

Regards,
Pranay
hellosrikanth
12-21-2006, 07:52 PM
Hi Pranay,

Can u pls post ur code, even I dont want to use the search box. pls help me out. I am a newbie.

Thanks