Predictive Text Select Menu

**Brendan** · 09-05-2005, 03:25 PM

Hi,

I'm working on something which will have a form containing a select menu with a lot of items (around 500). I would like to have a text box next to the list with predictive text input, so when you start typing in a text box it will choose the first item in the list starting with what you've typed so far.

For example, if this is the drop down list...:

Aadvark
Cat
Dog
Echidna
Elephant
Emu
Frog
Zebra

... and you type "el" in the box, it will choose Elephant. Also, if you do decide to click in the list, it will put the item you choose into the text box. And possibly pop up an alert when you leave the text box, if you typed something that doesn't match anything in the list.

Can somebody please help me with this, particularly the predictive text bit.

Thanks,
Brendan

**Brendan** · 09-05-2005, 03:26 PM

Oh yeh, if there's a way to make it in one thing (ie. you can type straight into the select menu) that would be good, but I wouldn't think that's possible...

**Twey** · 09-05-2005, 03:47 PM

It's already done by the browser. Try it: create a select box, give it focus, and type something.

**Brendan** · 09-06-2005, 12:19 AM

It seems to work in Firefox, but in IE it only works for the first letter. When you type the next letter it goes to the items starting with that letter.

The way I was thinking was kinda like in Access, where you type a letter and it has the next word in the list, with the rest of it highlighted, you keep typing and it chooses the first word starting with what you've typed. But it doesn't have to be like that, the browser's way should be fine.

**mattster** · 09-06-2005, 09:16 AM

There are a couple of ones out there. Deadbeef seems to be quite good but is only supported by IE:

http://www.deadbeef.com/index.php/2005/08/04/title

What i use sometimes is this code as you can pass the value over and not just the name as in the one above:

PHP Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Test page</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript">

//Autocomplete textfield



function matchFieldSelect (field, select, value) {

  var property = value ? 'value' : 'text';

  var found = false;

  for (var i = 0; i < select.options.length; i++)

    if ((found = select.options[i][property].indexOf(field.value) ==

0))

      break;

  if (found)

    select.selectedIndex = i;

  else

    select.selectedIndex = -1;

  if (field.createTextRange) {

    var cursorKeys ="8;46;37;38;39;40;33;34;35;36;45;"

    if (cursorKeys.indexOf(event.keyCode+";") == -1) {

      var r1 = field.createTextRange()

      var oldValue = r1.text;

      var newValue = found ? select.options[i][property] : oldValue;

      if (newValue != field.value) {

        field.value = newValue

        var rNew = field.createTextRange()

        rNew.moveStart('character', oldValue.length)

        rNew.select()

      }

    }

  }

}



</script>

</head>



<body>



<form>

<input type="text" name="a" onkeyup="matchFieldSelect(this, this.form.b)" />



<select name="b" size="1">

 <option value="1">aa</option>

 <option value="2">bb</option>

 <option value="3">cc</option>

 <option value="4">dd</option>

</select>



</form>

</body>

</html>

Thread: Predictive Text Select Menu

Thread Tools

Search Thread

Predictive Text Select Menu

Bookmarks

Bookmarks

Posting Permissions