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

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();
}

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

Why don't you order dropdown list items at the time they are filled? Then everything should be ok...

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

Dear Senthil Karuppaiah,

Can I use your javascript code in a commercial project?
Keeping the credits of course.

Thanks,

Emerson.

JavaScriptCode for translating english to arabic ???

Vinu

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].onkeypress = function() { return selectItem(); }
}
}
}

Hugh Nelson

This is just what I am looking for. It works fine on jsp pages. Well done.

Hugh Nelson

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?

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.

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.

Can you please more specific?. What is the issue?. It should work in all pentium 3 onwards.

You may choose to use binary search when the user press some key. This way the processing power will not be a problem.

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?

I am using this in PHP so here is my select code.

";

I cannot get this to work in IE 6.0 - are there any limitations?

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

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

Thanks Senthil

I have solved the delay problem by
creating index on the dropdown

thanks for advice

My pleasure. If you think helpful, don't forget to vote. thanks

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

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

Thanks. You are right.

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

I stand corrected.

Thanks for the link Smile | :)

We made the buttons on the screen look so good you'll want to lick them. Steve Jobs

Thanks. Changed the title to reflect the correct term.

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

Introduction

License

Comments and Discussions