AJAX Dropdown Disappears When Value Becomes Unique

[scopley]

I hope this is the right place to post this so here goes.I'm using AJAX to autopopulate a dropdown list as the user types in e-mail address. This all works great it pulls the values, creates the dropdown as the user is typing, however as soon as the user types enough letters to make the value unique the dropdown disappears.For example I have these 3 values:John.W.SmithJohn.W.KittelJohn.A.RountreeAs soon as the user gets to the A in the name the dropdown disappears.Here is my PHP code:

function getEmail($conn){	$query = "select EMAIL_ADR from COMMON.EMAILS order by EMAIL_ADR";	$emailResults = oci_parse($conn, $query);	oci_execute($emailResults);	$emails = array();	while ($item = oci_fetch_array($emailResults)) // loop resulting rows, one by one	{		$emails[] = $item['EMAIL_ADR'];	}	return $emails;}$users = getEmail($conn);//get the search parameter from URL$query=$_GET["search"];//lookup all hints from array if length of search>0if (strlen($query) > 0){	$result="";	for($i=0; $i<count($users); $i++)	{		if (strtolower($query)==strtolower(substr($users[$i],0,strlen($query))))		{			if ($result=="")			{				$result=$users[$i];			}			else			{				echo $i + 1 . "###" . $users[$i] . "|";			}		}	}}// Set output to "No Search Results Found" if no results were found// or to the correct valuesif ($result == ""){ $response="No Search Results Found"; }else{ $response=$result; }//output the responseecho $response;?>

Here is my javascript code:

function ajax_showOptions(inputObj, paramToExternalFile, e){	if(e.keyCode == 13 || e.keyCode == 9)	{	return;	}	if(ajax_list_currentLetters[inputObj.name] == inputObj.value)	{	return;	}	if(!ajax_list_cachedLists[paramToExternalFile])	{	ajax_list_cachedLists[paramToExternalFile] = new Array();	}	ajax_list_currentLetters[inputObj.name] = inputObj.value;	if(!ajax_optionDiv)	{		ajax_optionDiv = document.createElement('DIV');		ajax_optionDiv.id = 'ajax_listOfOptions';		document.body.appendChild(ajax_optionDiv);		if(ajax_list_MSIE)		{			ajax_optionDiv_iframe = document.createElement('IFRAME');			ajax_optionDiv_iframe.border = '0';			ajax_optionDiv_iframe.style.width = ajax_optionDiv.clientWidth + 'px';			ajax_optionDiv_iframe.style.height = ajax_optionDiv.clientHeight + 'px';			ajax_optionDiv_iframe.id = 'ajax_listOfOptions_iframe';			document.body.appendChild(ajax_optionDiv_iframe);		}		var allInputs = document.getElementsByTagName('INPUT');		for(var no = 0; no < allInputs.length; no++)		{			if(!allInputs[no].onkeyup)			{	allInputs[no].onfocus = ajax_options_hide;	}		}		var allSelects = document.getElementsByTagName('SELECT');		for(var no = 0; no < allSelects.length; no++)		{	allSelects[no].onfocus = ajax_options_hide;	}		var oldonkeydown = document.body.onkeydown;		if(typeof oldonkeydown != 'function')		{	document.body.onkeydown = ajax_option_keyNavigation;	}		else		{			document.body.onkeydown = function()			{				oldonkeydown();				ajax_option_keyNavigation();			}		}		var oldonresize = document.body.onresize;		if(typeof oldonresize != 'function')		{			document.body.onresize = function()			{	ajax_option_resize(inputObj);	};		}		else		{			document.body.onresize = function()			{				oldonresize();				ajax_option_resize(inputObj);			}		}	}	if(inputObj.value.length < minimumLettersBeforeLookup)	{		ajax_options_hide();		return;	}	ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';	ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';	if(ajax_optionDiv_iframe)	{		ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;		ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;;	}	ajax_list_activeInput = inputObj;	ajax_optionDiv.onselectstart = ajax_list_cancelEvent;	currentListIndex++;	if(ajax_list_cachedLists[paramToExternalFile][inputObj.value.toLowerCase()])	{	ajax_option_list_buildList(inputObj.value, paramToExternalFile, currentListIndex);	}	else	{		var tmpIndex = currentListIndex / 1;		ajax_optionDiv.innerHTML = '';		var ajaxIndex = ajax_list_objects.length;		ajax_list_objects[ajaxIndex] = new sack();				var url = ajax_list_externalFile + '?' + paramToExternalFile + '=1&search=' + inputObj.value.replace(" ", "+");				//specifying which file to get		ajax_list_objects[ajaxIndex].requestFile = url;		ajax_list_objects[ajaxIndex].onCompletion = function()		{			//specify function that will be executed after file has been found			ajax_option_list_showContent(ajaxIndex, inputObj, paramToExternalFile, tmpIndex);		};		//execute AJAX function		ajax_list_objects[ajaxIndex].runAJAX();	}}

I am at a loss this is all new to me. Please help.

[justsomeguy]

There's not enough information there to say why it's not showing up. Your PHP script could be more efficient if you only got the matching items from the database instead of getting everything and then searching manually. It looks like the output from PHP will be different if there is 1 result or more than one, because it looks like it's adding in some delimiters to separate them, but only if there is more than one. I assume the Javascript would be looking for those delimiters, but I don't see that in the one function you posted. It calls several other functions and I can't guess what those other things might be doing. I also can't tell how that function gets executed, what information is sent to it. It has this, for example:

	if(ajax_list_currentLetters[inputObj.name] == inputObj.value)	{	return;	}

Where the function just quits if that condition is true, but I don't know what inputObj.name, inputObj.value, or ajax_list_currentLetters are or what it means if those two values equal each other.You'll need to find the function that actually sends the request to PHP, and the function that handles the response. The one that handles the response should at least give you an idea about where to look next (if it calls another function), and you should also be able to tell what data it is sending the other functions. You can use a tool like Firebug to look at the request and response yourself to make sure that PHP is sending the correct data back.

[scopley]

There's not enough information there to say why it's not showing up. Your PHP script could be more efficient if you only got the matching items from the database instead of getting everything and then searching manually. It looks like the output from PHP will be different if there is 1 result or more than one, because it looks like it's adding in some delimiters to separate them, but only if there is more than one. I assume the Javascript would be looking for those delimiters, but I don't see that in the one function you posted. It calls several other functions and I can't guess what those other things might be doing. I also can't tell how that function gets executed, what information is sent to it. It has this, for example:

	if(ajax_list_currentLetters[inputObj.name] == inputObj.value)	{	return;	}

Where the function just quits if that condition is true, but I don't know what inputObj.name, inputObj.value, or ajax_list_currentLetters are or what it means if those two values equal each other.You'll need to find the function that actually sends the request to PHP, and the function that handles the response. The one that handles the response should at least give you an idea about where to look next (if it calls another function), and you should also be able to tell what data it is sending the other functions. You can use a tool like Firebug to look at the request and response yourself to make sure that PHP is sending the correct data back.

Thanks so much for your response. I have looked until my brain is tired and I can't seem to make this work.My HTML to execute this file is <input type="text" id="perfTxt" name="perfTxt" onkeyup="ajax_showOptions(this, 'tempVar', event);" /> Here is my entire file. Sorry for it being so lengthy. Hope this makes sense.:

var ajaxBox_offsetX = 0;var ajaxBox_offsetY = 0;//path to external filevar ajax_list_externalFile = 'gethint.php';//number of letters entered before a lookup is performedvar minimumLettersBeforeLookup = 1;var ajax_list_objects = new Array();var ajax_list_cachedLists = new Array();var ajax_list_activeInput = false;var ajax_list_activeItem;var ajax_list_optionDivFirstItem = false;var ajax_list_currentLetters = new Array();var ajax_optionDiv = false;var ajax_optionDiv_iframe = false;var ajax_list_MSIE = false;if(navigator.userAgent.indexOf('MSIE') >= 0 && navigator.userAgent.indexOf('Opera') < 0){	ajax_list_MSIE = true;	}var currentListIndex = 0;function ajax_getTopPos(inputObj){	var returnValue = inputObj.offsetTop;	while((inputObj = inputObj.offsetParent) != null)	{	returnValue += inputObj.offsetTop;	}	return returnValue;}function ajax_list_cancelEvent(){	return false;	}function ajax_getLeftPos(inputObj){	var returnValue = inputObj.offsetLeft;	while((inputObj = inputObj.offsetParent) != null)	{	returnValue += inputObj.offsetLeft;	}	return returnValue;}function ajax_option_setValue(e, inputObj){	if(!inputObj)	{	inputObj = this;	}	var tmpValue = inputObj.innerHTML;	if(ajax_list_MSIE)	{	tmpValue = inputObj.innerText;	}	else	{	tmpValue = inputObj.textContent;	}	if(!tmpValue)	{	tmpValue = inputObj.innerHTML;	}	ajax_list_activeInput.value = tmpValue;	if(document.getElementById(ajax_list_activeInput.name + '_hidden'))	{	document.getElementById(ajax_list_activeInput.name + '_hidden').value = inputObj.id;	}	ajax_options_hide();}function ajax_options_hide(){	if(ajax_optionDiv)	{	ajax_optionDiv.style.display = 'none';	}	if(ajax_optionDiv_iframe)	{	ajax_optionDiv_iframe.style.display = 'none';	}}function ajax_options_rollOverActiveItem(item, fromKeyBoard){	if(ajax_list_activeItem)	{	ajax_list_activeItem.className = 'optionDiv';	}	item.className = 'optionDivSelected';	ajax_list_activeItem = item;	if(fromKeyBoard)	{		if(ajax_list_activeItem.offsetTop > ajax_optionDiv.offsetHeight)		{	ajax_optionDiv.scrollTop = ajax_list_activeItem.offsetTop - ajax_optionDiv.offsetHeight + ajax_list_activeItem.offsetHeight + 2;	}		if(ajax_list_activeItem.offsetTop < ajax_optionDiv.scrollTop)		{	ajax_optionDiv.scrollTop = 0;	}	}}function ajax_option_list_buildList(letters, paramToExternalFile){	ajax_optionDiv.innerHTML = '';	ajax_list_activeitem = false;	if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length <= 1)	{		ajax_options_hide();		return;	}	ajax_list_optionDivFirstItem = false;	var optionsAdded = false;	for(var no = 0; no < ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length; no++)	{		if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].length == 0)		{	continue;	}		optionsAdded = true;		var div = document.createElement('DIV');		var items = ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].split(/###/gi);		if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length == 1 && ajax_list_activeInput.value == items[0])		{			ajax_options_hide();			return;		}		div.innerHTML = items[items.length - 1];		div.id = items[0];		div.className = 'optionDiv';		div.onmouseover = function()		{	ajax_options_rollOverActiveItem(this, false)	}		div.onclick = ajax_option_setValue;		if(!ajax_list_optionDivFirstItem)		{	ajax_list_optionDivFirstItem = div;	}		ajax_optionDiv.appendChild(div);	}	if(optionsAdded)	{		ajax_optionDiv.style.display = 'block';		if(ajax_optionDiv_iframe)		{	ajax_optionDiv_iframe.style.display = '';	}		ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem, true);	}}function ajax_option_list_showContent(ajaxIndex, inputObj, paramToExternalFile, whichIndex){	if(whichIndex != currentListIndex)	{	return;	}	var letters = inputObj.value;	var content = ajax_list_objects[ajaxIndex].response;	var elements = content.split('|');	ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()] = elements;	ajax_option_list_buildList(letters, paramToExternalFile);}function ajax_option_resize(inputObj){	ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';	ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';	if(ajax_optionDiv_iframe)	{		ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;		ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;	}}function ajax_showOptions(inputObj, paramToExternalFile, e){	if(e.keyCode == 13 || e.keyCode == 9)	{	return;	}	if(ajax_list_currentLetters[inputObj.name] == inputObj.value)	{	return;	}	if(!ajax_list_cachedLists[paramToExternalFile])	{	ajax_list_cachedLists[paramToExternalFile] = new Array();	}	ajax_list_currentLetters[inputObj.name] = inputObj.value;	if(!ajax_optionDiv)	{		ajax_optionDiv = document.createElement('DIV');		ajax_optionDiv.id = 'ajax_listOfOptions';		document.body.appendChild(ajax_optionDiv);		if(ajax_list_MSIE)		{			ajax_optionDiv_iframe = document.createElement('IFRAME');			ajax_optionDiv_iframe.border = '0';			ajax_optionDiv_iframe.style.width = ajax_optionDiv.clientWidth + 'px';			ajax_optionDiv_iframe.style.height = ajax_optionDiv.clientHeight + 'px';			ajax_optionDiv_iframe.id = 'ajax_listOfOptions_iframe';			document.body.appendChild(ajax_optionDiv_iframe);		}		var allInputs = document.getElementsByTagName('INPUT');		for(var no = 0; no < allInputs.length; no++)		{			if(!allInputs[no].onkeyup)			{	allInputs[no].onfocus = ajax_options_hide;	}		}		var allSelects = document.getElementsByTagName('SELECT');		for(var no = 0; no < allSelects.length; no++)		{	allSelects[no].onfocus = ajax_options_hide;	}		var oldonkeydown = document.body.onkeydown;		if(typeof oldonkeydown != 'function')		{	document.body.onkeydown = ajax_option_keyNavigation;	}		else		{			document.body.onkeydown = function()			{				oldonkeydown();				ajax_option_keyNavigation();			}		}		var oldonresize = document.body.onresize;		if(typeof oldonresize != 'function')		{			document.body.onresize = function()			{	ajax_option_resize(inputObj);	};		}		else		{			document.body.onresize = function()			{				oldonresize();				ajax_option_resize(inputObj);			}		}	}	if(inputObj.value.length < minimumLettersBeforeLookup)	{		ajax_options_hide();		return;	}	ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + 'px';	ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + 'px';	if(ajax_optionDiv_iframe)	{		ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;		ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;;	}	ajax_list_activeInput = inputObj;	ajax_optionDiv.onselectstart = ajax_list_cancelEvent;	currentListIndex++;	if(ajax_list_cachedLists[paramToExternalFile][inputObj.value.toLowerCase()])	{	ajax_option_list_buildList(inputObj.value, paramToExternalFile, currentListIndex);	}	else	{		var tmpIndex = currentListIndex / 1;		ajax_optionDiv.innerHTML = '';		var ajaxIndex = ajax_list_objects.length;		ajax_list_objects[ajaxIndex] = new sack();				var url = ajax_list_externalFile + '?' + paramToExternalFile + '=1&search=' + inputObj.value.replace(" ", "+");				//specifying which file to get		ajax_list_objects[ajaxIndex].requestFile = url;		ajax_list_objects[ajaxIndex].onCompletion = function()		{			//specify function that will be executed after file has been found			ajax_option_list_showContent(ajaxIndex, inputObj, paramToExternalFile, tmpIndex);		};		//execute AJAX function		ajax_list_objects[ajaxIndex].runAJAX();	}}function ajax_option_keyNavigation(e){	if(document.all)	{	e = event;	}	if(!ajax_optionDiv)	{	return;	}	if(ajax_optionDiv.style.display == 'none')	{	return;	}	//up arrow	if(e.keyCode == 38)	{		if(!ajax_list_activeItem)		{	return;	}		if(ajax_list_activeItem && !ajax_list_activeItem.previousSibling)		{	return;	}		ajax_options_rollOverActiveItem(ajax_list_activeItem.previousSibling, true);	}	//down arrow	if(e.keyCode == 40)	{		if(!ajax_list_activeItem)		{	ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem, true);	}		else		{			if(!ajax_list_activeItem.nextSibling)			{	return;	}			ajax_options_rollOverActiveItem(ajax_list_activeItem.nextSibling, true);		}	}	//enter key or tab key	if(e.keyCode == 13 || e.keyCode == 9)	{		if(ajax_list_activeItem && ajax_list_activeItem.className == 'optionDivSelected')		{	ajax_option_setValue(false, ajax_list_activeItem);	}		if(e.keyCode == 13)		{			//document.getElementById('searchBtn').focus();			return false;		}		else		{	return true;	}	}	//escape key	if(e.keyCode == 27)	{		ajax_options_hide();		ajax_list_objects = [];		ajax_list_cachedLists = [];	}}document.documentElement.onclick = autoHideList;function autoHideList(e){	if(document.all)	{	e = event;	}	if(e.target)	{	source = e.target;	}	else if(e.srcElement)	{	source = e.srcElement;	}	//safari bug	if(source.nodeType == 3)	{	source = source.parentNode;	}	if(source.tagName.toLowerCase() != 'input' && source.tagName.toLowerCase() != 'textarea')	{	ajax_options_hide();	}}

[justsomeguy]

This part in the buildList function:

	if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length <= 1)	{		ajax_options_hide();		return;	}

tells it to hide and stop if the length of items returned is less than or equal to one.That's definitely a lot of code to do a relatively easy thing, there's even still code missing (apparently somewhere there's a "sack" object defined which actually sends the requests out). A lot of dependence on global variables also. Definitely not easy to understand for a beginner.

[scopley]

This part in the buildList function:

	if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length <= 1)	{		ajax_options_hide();		return;	}

tells it to hide and stop if the length of items returned is less than or equal to one.That's definitely a lot of code to do a relatively easy thing, there's even still code missing (apparently somewhere there's a "sack" object defined which actually sends the requests out). A lot of dependence on global variables also. Definitely not easy to understand for a beginner.

YOU ARE WITHOUT A DOUBT THE BOMB!! Thank you so much!! I took out the line and it worked great. And YES I am a very basic beginner when it comes to AJAX. Thanks so much and have a great day!!!