Auto select (Incremental search, Auto-complete) an item from a dropdown as user keys in

By senthil karuppaiah, 23 Sep 2008

Download source files - 2.02 KB

Sample screenshot

Introduction

Normally, HTML does not support nearest match. It always treats each key stroke as the starting of a new search. But, that is useless. If I type 'C', it will go to the first item that starts with C; if I type 'O' immediately, it will go to the first item that starts with 'O'. But in this implementation, it will go to 'CO'.

If the user misspelled, the user can use the backspace key to delete the char 'O' and type another letter to select another item. The user can wait for 3 seconds to start a fresh search, or use backspace to delete the entire search key, or shift delete to restart again.

It finds the nearest possible match. So, it does not need to be in any order.

Just include the .js file in the target HTML:

<script language="JavaScript" src="dropdown.js"></script>

Add these events to your dropdown field:

onfocus="this.enteredText='';" onkeydown="return handleKey();" 
  onkeyup="event.cancelbubble=true;return false;" onkeypress="return selectItem();"

For example:

<select name="test" onfocus="this.enteredText='';" onkeydown="return handleKey();" 
  onkeyup="event.cancelbubble=true;return false;" onkeypress="return selectItem();">

onfocus resets the search text.
onkeydown handles certain keys (left, right, top, down, shift, delete, backspace) and takes the appropriate action.
onkeypress handles the selection of an item from the list.
onkeyup ignores the event as onkeypress has already handled the key stroke.

Open the HTML file using IE.
Type 'a', it will take you to the first item that starts with 'a'. Then, type 'b'; this will take you to the first item that starts with 'ab'. This uses a nearest match algorithm. So, the list does not need to be in any order.

The user can search a string within a dropdown list.
It automatically selects the list item that starts with the search key.
The user can use backspace to delete a char before the current index from the search key.
The user can use the delete button to delete a char after the current index from the search key.
The user can use left or right arrow keys to move back and forth over the search key, and use delete or backspace to delete a char; the script will automatically find the item in the list, or enter a new char from the current index.
Pressing the Shift and Delete keys will remove the search key and start over the search again.
The user can see the search key on the Windows status bar. It shows the current index too.

I am adding Hugh Nelson's suggestion also here, so that it is available for every one. If you want to change all the dropdowns in a page to have this functionality, call the following in the onload event:

function setSelectEvents() {
    // set javascript event attributes
    // for all select items in the current page
    var selects = document.getElementsByTagName("select");
    var arrOnfocus = new Array(); // array of onfocus functions
    var arrOnkeydown = new Array(); // array of onkeydown functions
    var arrOnkeyup = new Array(); // array of onkeyup functions
    var arrOnkeypress = new Array(); // array of onkeypress functions

    for (var i = 0; i < selects.length; i++) {
        // we need to ensure that
        // we don't overwrite any existing function

        // save index to array as an element attribute
        // (using i directly did not work)
        selects[i].title = i;

        // onfocus
        if(typeof(selects[i].onfocus) == 'function') {
        // there is a pre-existing function
            // save pre-existing function
            arrOnfocus[selects[i].title] = selects[i].onfocus;
            selects[i].onfocus = 
              function() { arrOnfocus[this.title](); this.enteredText=''; }
              // set event to call our code plus the pre-existing function
        }
        else { // there is no pre-existing function
            selects[i].onfocus = function() { this.enteredText=''; }
        }

        // onkeydown
        if(typeof(selects[i].onkeydown) == 'function') {
        // there is a pre-existing function
            // save pre-existing function
            arrOnkeydown[selects[i].title] = selects[i].onkeydown;
            selects[i].onkeydown = 
              function() { arrOnkeydown[this.title](); return handleKey(); }
              // set event to call our code plus the pre-existing function
        }
        else { // there is no pre-existing function
            selects[i].onkeydown = function() { return handleKey(); }
        }

        // onkeyup
        if(typeof(selects[i].onkeyup) == 'function') {
        // there is a pre-existing function
            // save pre-existing function
            arrOnkeyup[selects[i].title] = selects[i].onkeyup;
            selects[i].onkeyup = 
              function() { arrOnkeyup[this.title](); 
                           event.cancelbubble=true;return false; }
              // set event to call our code plus the pre-existing function
        }
        else { // there is no pre-existing function
            selects[i].onkeyup = 
              function() { event.cancelbubble=true;return false; }
        }

        // onkeypress
        if(typeof(selects[i].onkeypress) == 'function') {
        // there is a pre-existing function
            // save pre-existing function
            arrOnkeypress[selects[i].title] = selects[i].onkeypress;
            selects[i].onkeypress = 
               function() { arrOnkeypress[this.title](); return selectItem(); }
               // set event to call our code plus the pre-existing function
        }
        else { // there is no pre-existing function
            selects[i]. &#246;nkeypress = function() { return selectItem(); }
        }
    }
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

senthil karuppaiah

Web Developer

United States

Member

Fourteen years of progressive experience in Software Product Development, tactical planning, project and client management, demonstrated success in leadership, critical thinking, problem solving and analysis. Diverse knowledge and experience with multiple development methodologies, reengineering, software engineering, and integration of heterogeneous systems.

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board.

Search this forum
	Profile popups Spacing Noise Layout Per page

modified version

Member 359202

13 Nov '08 - 4:09

I modified the script:
1. to get rid of info in window.status - it creates dynamic div-s instead.
2. commented out timer function - user can press esc instead.
3. searches by partial string ('te' finds 'abtest')

HTML:

<html>
<head>
<!-- senthil karuppaiah -->
<!-- 12/22/2005 -->
<!--
Normally HTML does not support nearest match, It always treat each key stroke as starting of
new search. But that is useless. If I type 'C', it will go to first item starts with C,
if I type 'O' immediately, it will go to first item starts with 'O'. But in our case,
we go to 'CO'. If the user misspelled, he can use the backspace to delete the char 'O' and
return another letter. He can wait for 3 seconds to start fresh search or use backspace to
delete entire search key and restart again.
 
1) user can search the string within the dropdown list.
2) It automatically selects the list item that start with the search key
 
3) user can use backspace to delete a char before current index from the search key
 
4) user can use delete button to delete a char after current index from search key
 
5) user can use left or right arrow keys to move back and forth over the search key and use delete or backspace to delete a char, script automatically find the item in the list or enter a new char from the current index.
6) shift delete will remove the search key and start over the search again.
7) user can see the search key on top of dropdown.
 

-->
	<script type="text/javascript">history.go(1);</script>
	<script language="JavaScript" src="dropdown.js"></script>
</head>
<body bgcolor="#ffffff" marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">
Type to search, press esc to cancel.<br><br>
 

    <select name="test1" id="test1" onfocus="this.enteredText='';createDiv(this);" onblur="removeDiv(this);" onkeydown="return handleKey();" onkeyup="event.cancelbubble=true;return false;" onkeypress="return selectItem();">
     <option value="1">test</option>
     <option value="1">mtest</option>
     <option value="1">atest</option>
     <option value="1">abtest</option>
     <option value="1">abctest</option>
     <option value="1">abcdtest</option>
     <option value="1">abcdetest</option>
     <option value="1">abcdeftest</option>
     <option value="1">12/04/2005</option>
     <option value="1">01/04/2005</option>
	 <option value="1">acb'test</option>
	 <option value="1">$123.00</option>
	 <option value="1">-$123.00</option>
	 <option value="1">$123</option>
     <option value="1">acbtest</option>
     <option value="1">100,000</option>
     <option value="1">111,000</option>
     <option value="1">90,000</option>
     <option value="1">8,000</option>
     <option value="1">8,001</option>
      <option value="1">8,301</option>
     </select>
<br><br>
<select name="test2" id="test2" onfocus="this.enteredText='';createDiv(this);" onblur="removeDiv(this);" onkeydown="return handleKey();" onkeyup="event.cancelbubble=true;return false;" onkeypress="return selectItem();">
	 <option value="1">$123.00</option>
	 <option value="1">-$123.00</option>
	 <option value="1">$123</option>
     <option value="1">acbtest</option>
     <option value="1">100,000</option>
     <option value="1">111,000</option>
     <option value="1">90,000</option>
     <option value="1">8,000</option>
     <option value="1">8,001</option>
      <option value="1">8,301</option>
     </select>
</br></br></br></br></body>
</html>

Javascript (dropdown.js):

var _offsetTop=0;
var _offsetLeft=0;
var _offsetLeftClip=0;
 
function findPos(obj) {
  // Credit for this function: http://www.quirksmode.org/js/findpos.html
  // Visit the URL for a complete tutorial on this function
  var curleft = curtop = parent_offSetLeft = parent_offSetTop = 0;
  if (obj.offsetParent) {
     curleft = obj.offsetLeft
     curtop = obj.offsetTop
     curwidth = obj.offsetWidth;
     while (obj = obj.offsetParent) {
        curleft += obj.offsetLeft
        curtop += obj.offsetTop
        if(obj.id) {
           parent_offSetLeft = obj.offsetLeft;
           parent_offSetTop = obj.offsetTop;
         }
     }
  }
  return [curleft,curtop,curwidth,parent_offSetLeft,parent_offSetTop];
}
 

function createDiv(inpObj)
{ 
 

var _div = document.createElement('div');
var _text = document.createTextNode('');
_div.appendChild(_text);
 
_div.setAttribute("id", "div"+inpObj.id);
 

  
  // Positioning of the div

  _div.style.position = "absolute";
  ofs=findPos(inpObj);       
  
                          
  _div.style.top=(ofs[1]+_offsetTop+(ofs[4]*-1)-18)+'px';      
  _div.style.left=(ofs[0]+_offsetLeft+(ofs[3]*-1))+'px';    
                                                              
  _div.style.width=(inpObj.offsetWidth+_offsetLeftClip)+'px';
 
document.body.appendChild(_div);
}
 
function removeDiv(inpObj)
{ 
 
var _div = document.getElementById("div"+inpObj.id);
 
document.body.removeChild(_div);
}
 
function handleKey(e)
{
    keycode = event.keyCode;
    ele = event.srcElement;
    
    if(ele != null) {
				if(keycode == 8 || keycode == 127) // backspace
				{
					if(isNaN(ele.insertIndex) || ele.insertIndex == -1) {
						ele.enteredText = ele.enteredText.substring(0,ele.enteredText.length-1);
						ele.insertIndex = -1;
					}
					else{
						ele.enteredText = ele.enteredText.substr(0,ele.insertIndex-1) + ele.enteredText.substr(ele.insertIndex);
						if(ele.insertIndex > 0 ) {
							ele.insertIndex = ele.insertIndex - 1;
						}
					}
					resetTime(ele);
					event.cancelbubble=true;
					setSelected(ele);
					return false;
				}
				else if(keycode == 46){  // delete
					if(event.shiftKey) {
						ele.enteredText = "";
						ele.selectedIndex=0;
						ele.insertIndex = -1;
					}
					else {
						ele.enteredText = ele.enteredText.substr(0,ele.insertIndex) + ele.enteredText.substr(ele.insertIndex+1);
					}
					resetTime(ele);
					setSelected(ele);
				}
				else if(keycode == 37){ // left arrow
					 if(isNaN(ele.insertIndex) || ele.insertIndex == -1) {
						ele.insertIndex = ele.enteredText.length-1;
					 }
					 else {
						if(ele.insertIndex > 0 ) {
							ele.insertIndex = ele.insertIndex - 1;
						}
					 }
					 resetTime(ele);
					 setSelected(ele);
				}
				else if(keycode == 39){ // right arrow
					 if(isNaN(ele.insertIndex) || ele.insertIndex == -1) {
						ele.insertIndex = ele.enteredText.length;
					 }
					 else {
						if(ele.insertIndex < ele.enteredText.length) {
							ele.insertIndex = ele.insertIndex + 1;
						}
					 }
					 resetTime(ele);
					 setSelected(ele);
				}
				else if(keycode == 9 || keycode == 39 || keycode == 40 ){ // tab,up and down arrow
					event.cancelbubble=false;
					ele.enteredText = "";
					ele.insertIndex = -1;
					return true;
				}
 

	}
	return true;
}
function resetTime(ele){
		var curTime = new Date();
		var t = curTime.getTime() -  ele.lastEntered;
		ele.lastEntered = curTime;
 
var _div = document.getElementById("div"+ele.id);
oldNode = _div.firstChild;
        _div.removeChild(oldNode);
newNode = document.createTextNode( ele.enteredText);
        _div.appendChild(newNode);
 
}
function setSelected(){
	ele = event.srcElement;
	if (ele != null)
	{ // detect if element exists
		enteredText = ele.enteredText.toLowerCase();
		var selectIndex = -1;
		var selectLength = 20000;
		for(k=0; k < ele.children.length;k++){
		  txt = ele.children[k].text.toLowerCase()
		  if( txt.indexOf(enteredText) >= 0) {
			if(txt == enteredText){
		  	   selectIndex =k;
		  	   break;
		  	}
		  	var len = txt.length;
		  	if(selectLength > len) {
		  		selectLength = len;
		  		selectIndex = k;
		  	}
		  }
		}
		if(selectIndex > -1) {
		   ele.selectedIndex=selectIndex;
var _div = document.getElementById("div"+ele.id);
oldNode = _div.firstChild;
        _div.removeChild(oldNode);
newNode = document.createTextNode(ele.enteredText );
        _div.appendChild(newNode);
 
//		   window.status= ":Search Text=" + ele.enteredText +  ":Selected Index=" + ele.selectedIndex + ":Current position=" + ele.insertIndex;
		   return false;
		}
	} // end if
	return false;
}
function selectItem(txtField,tier2){
	ele = event.srcElement;
	if(isNaN(ele.insertIndex)) {
	  ele.insertIndex = -1;
	}
	if(ele.insertIndex > -1) {
		ele.enteredText = ele.enteredText.substr(0,ele.insertIndex) +  String.fromCharCode(event.keyCode) + ele.enteredText.substr(ele.insertIndex);
		ele.insertIndex = ele.insertIndex +1;
	}
	else {
		if(ele.enteredText == "") {
			ele.lastEntered = new Date();
		}
				else if(ele.enteredText==String.fromCharCode(27) ){ // esc
					ele.enteredText = "";
				}		
//else { //timer function is commented out
		  //var curTime = new Date();
		  //var t = curTime.getTime() -  ele.lastEntered;
		  //ele.lastEntered = curTime;
		  //if(t > 2000) {
	          //ele.enteredText = "";
 		  //}
//		}
if (event.keyCode!=27){
		ele.enteredText = ele.enteredText + String.fromCharCode(event.keyCode);}
else
{ele.enteredText ='';}
	}
	event.cancelBubble=true;
var _div = document.getElementById("div"+ele.id);
var oldNode = _div.firstChild;
 
        _div.removeChild(oldNode);
 
var newNode = document.createTextNode(ele.enteredText );
        _div.appendChild(newNode);
//	window.status= ":Search Text=" + ele.enteredText +  ":Selected Index=" + ele.selectedIndex + ":Current position=" + ele.insertIndex;
	return setSelected();
}

Order of Selection. Pls respond. [modified]

Nav11

20 May '08 - 3:19

In the Incremental search dropdown, the order is random. Can we make it alphabetically ordered ? If we press 'C' then selected item is 'Colorado' but alphabetically we want it to be 'California'. Thanks in advance. modified on Tuesday, May 20, 2008 9:37 AM
Sign In·View Thread·Permalink

Re: Order of Selection. Pls respond.

Member 359202

13 Nov '08 - 21:28

Why don't you order dropdown list items at the time they are filled? Then everything should be ok...
Sign In·View Thread·Permalink

Re: Order of Selection. Pls respond.

rajapandian81

14 Dec '09 - 3:51

To make it alphabetically ordered one we have to add break; statement after the line selectIndex = k; in dropdown.js file.
Sign In·View Thread·Permalink

Commercial usage

Emerson Takahashi

20 Mar '08 - 6:20

Dear Senthil Karuppaiah, Can I use your javascript code in a commercial project? Keeping the credits of course. Thanks, Emerson.
Sign In·View Thread·Permalink

JavaScript

Vinug

29 Nov '07 - 18:47

JavaScriptCode for translating english to arabic ??? Vinu
Sign In·View Thread·Permalink

Change all select items in a page

hugh.nelson

5 Sep '07 - 18:48

If you want to change all select items in a page to have this functionality call the following in the onload event:

function setSelectEvents() {
// set javascript event attributes for all select items in the current page
var selects = document.getElementsByTagName("select");
var arrOnfocus = new Array(); // array of onfocus functions
var arrOnkeydown = new Array(); // array of onkeydown functions
var arrOnkeyup = new Array(); // array of onkeyup functions
var arrOnkeypress = new Array(); // array of onkeypress functions

for (var i = 0; i < selects.length; i++) {
// we need to ensure that we don't overwrite any existing function

// save index to array as an element attribute (using i directly did not work)
selects[i].title = i;

// onfocus
if(typeof(selects[i].onfocus) == 'function') { // there is a pre-existing function
arrOnfocus[selects[i].title] = selects[i].onfocus; // save pre-existing function
selects[i].onfocus = function() { arrOnfocus[this.title](); this.enteredText=''; } // set event to call our code plus the pre-existing function
}
else { // there is no pre-existing function
selects[i].onfocus = function() { this.enteredText=''; }
}

// onkeydown
if(typeof(selects[i].onkeydown) == 'function') { // there is a pre-existing function
arrOnkeydown[selects[i].title] = selects[i].onkeydown; // save pre-existing function
selects[i].onkeydown = function() { arrOnkeydown[this.title](); return handleKey(); } // set event to call our code plus the pre-existing function
}
else { // there is no pre-existing function
selects[i].onkeydown = function() { return handleKey(); }
}

// onkeyup
if(typeof(selects[i].onkeyup) == 'function') { // there is a pre-existing function
arrOnkeyup[selects[i].title] = selects[i].onkeyup; // save pre-existing function
selects[i].onkeyup = function() { arrOnkeyup[this.title](); event.cancelbubble=true;return false; } // set event to call our code plus the pre-existing function
}
else { // there is no pre-existing function
selects[i].onkeyup = function() { event.cancelbubble=true;return false; }
}

// onkeypress
if(typeof(selects[i].onkeypress) == 'function') { // there is a pre-existing function
arrOnkeypress[selects[i].title] = selects[i].onkeypress; // save pre-existing function
selects[i].onkeypress = function() { arrOnkeypress[this.title](); return selectItem(); } // set event to call our code plus the pre-existing function
}
else { // there is no pre-existing function
selects[i]. önkeypress = function() { return selectItem(); }
}
}
}

Hugh Nelson

Great simple solution

hugh.nelson

4 Sep '07 - 13:58

This is just what I am looking for. It works fine on jsp pages. Well done. Hugh Nelson
Sign In·View Thread·Permalink

What are these? (Ele.lastEntered, ele.EnteredText )

ckwizard77

19 Jul '07 - 5:50

I am pretty new to javascript and wanted to know if there is a list of these items somewhere. I can not find them in any list of properties, methods or events? Please help?
Sign In·View Thread·Permalink

Re: What are these? (Ele.lastEntered, ele.EnteredText )

senthil karuppaiah

6 Aug '07 - 6:18

Those are custom properties. In Javascript, you can dynamically define your own properties/ Attributes/class member element. If you use prototype pattern in javascript, you can declare class definition and use them. But in normal javascript, you just need to say object.attribute = value. You can refer this any where in your code as it belongs to core javascript object.
Sign In·View Thread·Permalink

problem on old machines

zum123

27 Jun '07 - 3:04

I am using dropdown.js in our application and found that it works only on new machines. All client machines are on same IE version and same browser set up.
Keyboard is not problem. I tried to increase wait time 2000 to 1000 in the js code, but still no luck. Given keyboard, IE are not problem, coming closer to conclude it could be slow processor taking long time to send keyboard events to the code with is on Unix?
Newer machine where type in code works has Dual core processor, 512MB RAM while old machines has Pent 3 or less processor and 256MB or less RAM.

Please help. It's URGENT as the application is in production now and type in drop down is MUST to have feature of the application.

Thanks in advance.

Re: problem on old machines

senthil karuppaiah

3 Jul '07 - 6:41

Can you please more specific?. What is the issue?. It should work in all pentium 3 onwards.
Sign In·View Thread·Permalink

Re: problem on old machines

tkrafael_net

24 Sep '08 - 6:25

You may choose to use binary search when the user press some key. This way the processing power will not be a problem.
Sign In·View Thread·Permalink

Problems with status in IE 7

mrortner

10 Apr '07 - 6:38

I can run the examplt and the status works great. I put it in my code and the search works but the backspace option doesn't work and the status doesn't work. Does anyone have any suggestions or has anyone ran into this before?
Sign In·View Thread·Permalink

Re: Problems with status in IE 7

mrortner

10 Apr '07 - 6:41

I am using this in PHP so here is my select code. <select style='font-weight: bold;' name=\"session\" id=\"session\" onfocus=\"this.enteredText='';\" onkeydown=\"return handleKey();\" onkeyup=\"event.cancelbubble=true;return false;\" önkeypress=\"return selectItem();\">";
Sign In·View Thread·Permalink

Browser Limitations

TBBASEFLUG

20 Nov '06 - 5:22

I cannot get this to work in IE 6.0 - are there any limitations?
Sign In·View Thread·Permalink

problem with too many options

Pranav Kaushik

18 Aug '06 - 2:53

I had used the above code but it works fine until the number of items are less but i have populated it dynamically from database and thus it has more than 7000 items. The code doesnt work too many items in the dropdown Please help if any advices Thanks in advance
Sign In·View Thread·Permalink

Re: problem with too many options [modified]

senthil karuppaiah

18 Aug '06 - 19:03

All implementations will have some limitation. You need to understand that even database will take time if it is not indexed properly. Here you need to go through 7000 items to get correct match. if your list is ordered, then we can tune some of the code. You can build start index for each alpha chars, so that next time you can start from appropriate start index. But still problem, if most of your data starts with same Char, then need to go through entire list.

Example
ALAN
AMI
BAL
BAT
CAT

so you build index tree
A = 0
B = 2
C = 4

When the user type C, you can get the start index of C from the tree and start the search from that place. It will improve the performance.

Else you can do this, it will find the start index for the first char and keep that index until you press Shift DELETE or only char in the search key.
Replace the code after resetTime function with.To improve the performance i disabled the timer(resetOnTime=false) to reset the search key. If it is ordered list, set "ordered = true;", else make it false.

var running = false;
var stop = false;
var ordered = true;
var startIndex = 0;
var resetOnTime = false;
function setSelected(){
ele = event.srcElement;
if(running == false) {
running = true;
}
else {

return false;
}
if (ele != null)
{ // detect if element exists
enteredText = ele.enteredText.toLowerCase();
var selectIndex = -1;
var selectLength = 20000;
var started = false;
for(k=startIndex; k < ele.children.length;k++){
txt = ele.children[k].text.toLowerCase();
if( txt.indexOf(enteredText) == 0) {
started = true;
//alert();
if(ordered == true) {
selectIndex =k;
if(startIndex == 0) {
startIndex = k;
}
break;
}
else {
if(txt == enteredText){
selectIndex =k;
break;
}
var len = txt.length;
if(selectLength > len) {
selectLength = len;
selectIndex = k;
}
}
}
else if(started == true && ordered == true) {
break;
}
}
if(selectIndex > -1) {
ele.selectedIndex=selectIndex;
window.status= ":Search Text=" + ele.enteredText + ":Selected Index=" + ele.selectedIndex + ":Current position=" + ele.insertIndex;
running = false;
started = false;
return false;
}
} // end if
running = false;
started = false;

return false;
}

function selectItem(txtField,tier2){
ele = event.srcElement;
if(isNaN(ele.insertIndex)) {
ele.insertIndex = -1;
}
if(ele.insertIndex > -1) {
ele.enteredText = ele.enteredText.substr(0,ele.insertIndex) + String.fromCharCode(event.keyCode) + ele.enteredText.substr(ele.insertIndex);
ele.insertIndex = ele.insertIndex +1;
}
else {
if(ele.enteredText == "") {
ele.lastEntered = new Date();
}
else {
if(resetOnTime == true) {
//alert(resetOnTime);
var curTime = new Date();
var t = curTime.getTime() - ele.lastEntered;
ele.lastEntered = curTime;
if(t > 2000) {
ele.enteredText = "";
}
}
}
ele.enteredText = ele.enteredText + String.fromCharCode(event.keyCode);
if(ele.enteredText.length == 1) {
startIndex = 0;
}
}
event.cancelBubble=true;
window.status= ":Search Text=" + ele.enteredText + ":Selected Index=" + ele.selectedIndex + ":Current position=" + ele.insertIndex;
return setSelected(true);
}

-- modified at 2:00 Saturday 19th August, 2006

Re: problem with too many options

Pranav Kaushik

18 Aug '06 - 22:22

Thanks Senthil I have solved the delay problem by creating index on the dropdown thanks for advice
Sign In·View Thread·Permalink

Re: problem with too many options [modified]

senthil karuppaiah

19 Aug '06 - 4:34

My pleasure. If you think helpful, don't forget to vote. thanks -- modified at 11:00 Saturday 19th August, 2006
Sign In·View Thread·Permalink

Term

norm .net

6 Aug '06 - 21:34

I think the term you're after for this technology is 'Autocomplete'. We made the buttons on the screen look so good you'll want to lick them. Steve Jobs
Sign In·View Thread·Permalink

Re: Term

senthil karuppaiah

7 Aug '06 - 6:48

Thanks. You are right.
Sign In·View Thread·Permalink

Incremental Search

rlivelyppk

8 Aug '06 - 12:26

Autocomplete usually refers to the "Intellisense" type of feature, where you start typing a keyword in an editor and the editor finishes the rest of the keyword for you.

The term usually used for the feature implemented in this article is "Incremental Search":

http://www.usabilityfirst.com/glossary/term_918.txl

a search that progressively finds a match for the search string as each character is typed

Re: Incremental Search

norm .net

8 Aug '06 - 20:42

I stand corrected. Thanks for the link We made the buttons on the screen look so good you'll want to lick them. Steve Jobs
Sign In·View Thread·Permalink

Re: Incremental Search

senthil karuppaiah

9 Aug '06 - 5:59

Thanks. Changed the title to reflect the correct term.
Sign In·View Thread·Permalink

General News Suggestion Question Bug Answer Joke Rant Admin

HTML lacks the auto-select feature for dropdowns. Users familiar with desktop applications expect browsers to select the correct item from a dropdown list as they key in. I am trying to solve this using simple JavaScript.

Type	Article
Licence	CPOL
First Posted	6 Aug 2006
Views	66,428
Downloads	610
Bookmarked	20 times

JavascriptWindows
Visual-StudioHTMLDev, +

		9,882,945 members (63,619 online) Visit CodeProject.TV Discuss CodeProject.TV Sign in Email Password Forgot your password? Sign in using