OOPed Autocomplete Select

**Vincent Puglia** · Sep 10, 2003 12:48

Ok, here's a recent version of a script I've been playing with. Essentially, it 'autocompletes' a selection list. What I would like to know is what browsers & which versions it works / crashes on.

Please note it includes new properties for the selection list (userWord & userWord2) and a method within the autoSelect() object

If you decide to swipe the code for your own use -- go ahead -- but please keep my name & url there -- I'm hoping to get it up on my site with full explanation before the end of the weekend.

Test by find "New York" (spaces important) It times out, and backspace resets

Thanks
Vinny

Code:

<html>
<head>
<script language="javascript">
<!--
/* ------------------------------------------------------
author: Vincent Puglia, GrassBlade Software
site: http://members.aol.com/grassblad
--------------------------------------------------------- */
function autoSelect(selObj)
{
if (typeof selObj.userWord == 'undefined')
{
selObj.userWord = "";
selObj.userWord2 = "";
}

if (typeof this.clearit == 'undefined')
{
this.clearit = function()
{
if ( selObj.userWord2 == selObj.userWord)
{
selObj.userWord = selObj.userWord2 = "";
selObj.options[0].selected = true;
}
else 
selObj.userWord2 = selObj.userWord;
setTimeout("this.clearit()", 5000)
}
setTimeout("this.clearit()", 5000)
}
if (event.keyCode == 8)
{
selObj.userWord2 = selObj.userWord = ""; 
selObj.options[0].selected = true;
selObj.options[0].focus(); 
return;
}
thekey = String.fromCharCode(event.keyCode);
selObj.userWord += thekey;
for (var i = 0; i < selObj.options.length; i++)
{
var txt = selObj.options[i].text.toUpperCase();
if (txt.indexOf(selObj.userWord) == 0)
{
selObj.options[i].selected = true;
selObj.userWord2 = selObj.userWord;
break;
}
}
}
//-->
</script>
</head>
<body onload='document.a.mySelect.focus()'>
<form name="a">
<select name="mySelect" onKeyup="autoSelect(this)">
<option value="AL">Alabama</option>
<option value="DE">Delaware</option>
<option value="NB">Nebraska</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
</select>
</form>
</body>
</html>

**blufive** · Sep 10, 2003 13:55

I assume this is meant to allow you to select items in the list by typing them, and it will select the item on the fly based on what you type?

Recent versions of Mozilla-based browsers come with this functionality built-in, so I can't tell whether it's your script working, or the browser doing it natively.

Also, http://members.aol.com/grassblad/ is doing really unpleasant things to Mozilla Firebird 0.6.1 here, the upshot being that I can't see the site at all. Looks like there's something nasty going on with the content-type headers or something.

**Vincent Puglia** · Sep 10, 2003 14:10

Hi gav,

re the script: yes, that's what it's supposed to do. Since I haven't downloaded any of the newer browsers, I wasn't aware that capability is native. How do they handle backspace, etc?

re the site: thanks for the info, but I'm not that surprised. I haven't worked on it for awhile -- and not at all for opera, firebird, etc, etc.

Vinny

**blufive** · Sep 10, 2003 14:24

It seems to sort-of ignore backspace - it doesn't change the item that's selected, anyhow. There's a timeout of about a second, after which anything you type starts over.

Probably the best way to find out how it behaves is to download Firebird and play with it

**Vincent Puglia** · Sep 10, 2003 14:49

easy enough for you to say

I'm running on 28,800 bps throughput and aol loves timing out

I will, though; along with the others (nn7+, opera, etc, etc.

Vinny

**beetle** · Sep 10, 2003 15:10

I'd change

setTimeout("this.clearit()", 5000)

to

setTimeout(this.clearit, 5000)

to avoid any possible scoping issues

**Vincent Puglia** · Sep 10, 2003 15:16

Hi beetle,

to avoid any possible scoping issues

as with other clearit()s (put in by the user) ?

just tried it go a 'stack overflow' error

Vinny

**Vincent Puglia** · Sep 10, 2003 15:19

BTW: this is what it looks like now -- added another prop (oldNdx) and code so that 'alasc' doesn't bring you from 'alaska' to 'colorado'

and yes, I'm trying to write a customized self-contained selection list

Vinny

Code:

<script language="javascript">
<!--
/* ------------------------------------------------------
   author: Vincent Puglia, GrassBlade Software
   site:   http://members.aol.com/grassblad
--------------------------------------------------------- */
function autoSelect(selObj)
{
  if (typeof selObj.userWord == 'undefined')
  {
	 selObj.userWord = "";
	 selObj.userWord2 = "";
	 selObj.oldNdx = 0;
  }
  
  if (typeof this.clearit == 'undefined')
  {
	 this.clearit = function()
		   {
			 if ( selObj.userWord2 == selObj.userWord)
			 {
				 selObj.userWord = selObj.userWord2 = "";
				 selObj.options[0].selected = true;
			 }
			 selObj.userWord2 = selObj.userWord;
			 setTimeout("this.clearit()", 10000)
		   }
	 setTimeout("this.clearit()", 10000)
  }

  if (event.keyCode == 13)
  {
	clearTimeout("this.clearit()")
	alert(selObj.options[selObj.selectedIndex].value)
  }
  if (event.keyCode == 8)
  {
	 selObj.userWord2 = selObj.userWord = ""; 
	 selObj.options[0].selected = true;
	 selObj.options[0].focus();	 
	 return;
  }
  thekey = String.fromCharCode(event.keyCode);
  selObj.userWord += thekey;
  
  for (var i = 0; i < selObj.options.length; i++)
  {
	 var txt = selObj.options[i].text.toUpperCase();
	 if (txt.indexOf(selObj.userWord) == 0)
	 {
	   selObj.options[i].selected = true;
	   selObj.userWord2 = selObj.userWord;
	   selObj.oldNdx = selObj.selectedIndex;
	   break;
	 }
  }
  if (selObj.oldNdx != selObj.selectedIndex)	 
	 selObj.options[selObj.oldNdx].selected = true;
}

//-->
</script>

**beetle** · Sep 10, 2003 15:41

Closer inspection of your script gives me pause.

Tell me something, why are you using this at all? autoSelect() isn't a constructor, so this most likely references window. Any attempt to truly use this like an OO script (multiple instances) will fail because of this.

**beetle** · Sep 10, 2003 16:07

Here's a true OO iteration that I started

Code:

<html>
<head>
<script>
function AutoSelect(selObj)
{
	var userWord	= "",
		userWord2	= "",
		self		= this;
	
	function clearit()
	{
		if ( userWord2 == userWord )
		{
			reset();
			selObj.options[0].selected = true;
		} else {
			userWord2 = userWord;
		}
		setTimeout( clearit, 10000 );
	}
	setTimeout( clearit, 10000 );
	function reset()
	{
		userWord = userWord2 = "";
	}
	selObj.onkeypress = selObj.onkeyup = function( e )
	{
		var kc = ( e ) ? e.which : event.keyCode;
		window.status = kc;
		if ( kc == 8 )
		{
			reset();
			clearit();
		}
		var thekey = String.fromCharCode( kc ), txt;
		userWord += thekey;
		var i = 0, opt;
		while( opt = selObj.options[i++] )
		{
			regex = new RegExp( "^" + userWord, "i" );
			if ( regex.test( opt.text ) )
			{
				opt.selected = true;
				userWord2 = userWord;
				break;
			}
		}
	}
}
function init()
{
	var f = document.a;
	var a = new AutoSelect( f.mySelect );
	var b = new AutoSelect( f.mySelect2 );
}
</script>
</head>
<body onload="init();">
	<form name="a">
		<select name="mySelect">
			<option value="AL">Alabama</option>
			<option value="DE">Delaware</option>
			<option value="NB">Nebraska</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
		</select>
		<select name="mySelect2">
			<option value="AL">Alabama</option>
			<option value="DE">Delaware</option>
			<option value="NB">Nebraska</option>
			<option value="NJ">New Jersey</option>
			<option value="NM">New Mexico</option>
			<option value="NY">New York</option>
			<option value="NC">North Carolina</option>
			<option value="ND">North Dakota</option>
		</select>
	</form>
</body>
</html>

**Poop_Shoot** · Sep 10, 2003 16:39

Whats the second field for in the new RegExp!

regex = new RegExp( "^" + userWord, "i" );

**beetle** · Sep 10, 2003 17:02

That is the pattern flags parameter. There are three pattern flags that JS supports

i = case insensitive
g = global, across whole pattern
m = multiline

In a literally declared pattern, these are added at the end.

var pattern = /^textToMatch/i;

**MikeFoster** · Sep 10, 2003 20:56

Great Stuff!

**blufive** · Sep 11, 2003 16:50

I'm running on 28,800 bps throughput and aol loves timing out

Downer.

Download managers (like getright or gozilla) are good for this - at least you can resume downloads rather than having to start over.

MozillaFirebird is about 6.8MB on windows, Opera 7 is about 3.1MB. While they're large downloads for a 28kb link, they're not stupidbig.

Firebird and Netscape 7.1 are close enough in rendering capabilities that, for those on a link like yours, NN7.1 (30MB) is probably more grief than it's worth if you only want it for testing.

**Vincent Puglia** · Sep 11, 2003 18:18

Hi Beetle,

so this most likely references window

True, true...mea culpa -- only defense and not a very good one at that: I was writing half a dozen things at the same time.

I should have known if you saw this thread, you'd be tempted to write your own version

I like the regEx, but was wondering the logic of removing the 'userWord' vars from the selection list object and placing the within the autoSelect function -- to make them more accessible to the other local functions?

I tried running it -- couldn't get to NY without reverting to hitting 'N'

Vinny

**beetle** · Sep 11, 2003 21:06

What I did was only a start - nowhere near a finished product. Just a framework to build on.

And yes, you should have known.

**Poop_Shoot** · Sep 11, 2003 21:14

Whats the use for this line?

self = this;
I dont see it used anywhere else?

**beetle** · Sep 11, 2003 21:48

Oh, I must have not used it. Probably leftover from a earlier revision. Shouldn't be there

User Tag List

Thread: OOPed Autocomplete Select

Thread Tools

Display

OOPed Autocomplete Select

Bookmarks

Bookmarks

Posting Permissions