SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    OOPed Autocomplete Select

    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>
    Where the World Once Stood
    the blades of grass
    cut me still

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Where the World Once Stood
    the blades of grass
    cut me still

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Where the World Once Stood
    the blades of grass
    cut me still

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd change

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

    to

    setTimeout(this.clearit, 5000)

    to avoid any possible scoping issues
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Where the World Once Stood
    the blades of grass
    cut me still

  8. #8
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Where the World Once Stood
    the blades of grass
    cut me still

  9. #9
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  11. #11
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whats the second field for in the new RegExp!

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

  12. #12
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  13. #13
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great Stuff!

  14. #14
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Where the World Once Stood
    the blades of grass
    cut me still

  16. #16
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I did was only a start - nowhere near a finished product. Just a framework to build on.

    And yes, you should have known.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  17. #17
    Under Construction Poop_Shoot's Avatar
    Join Date
    Jul 2003
    Location
    Sacramento, CA
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whats the use for this line?

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

  18. #18
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I must have not used it. Probably leftover from a earlier revision. Shouldn't be there
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •