Suggest doesnt work for both input text fields.

tinapa · Oct 1, 2009

i am trying to adapt this php suggest:

http://www.dhtmlgoodies.com/index.html?whichScript=ajax-dynamic-list

in my code, the suggest for text input countries works. the suggest for text input cities works.

but one would not work if i try to have them both have suggest.

what am i missing? what should i do so that both are working together?

any help guys is appreciated. tnx

the following are the codes:

ajax-dynamic-list.html
----------------------

Code:

.
.
<head>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="ajax-dynamic-list-countries.js"></script>
<script type="text/javascript" src="ajax-dynamic-list-cities.js"></script>
</head>
</head>
.
.
.
<input type="text" onFocus=clearText(this) name="countries" autocomplete="off" onKeyUp="ajax_showOptions(this,'getByLetters',event)">
.
.
<input type="text" onFocus=clearText(this) name="cities" autocomplete="off" onKeyUp="ajax_showOptions(this,'getByLetters2',event)">
.
.

("ajax-dynamic-list-countries.js" has same code with the "ajax-dynamic-list-cities.js" except that the "ajax-dynamic-list-cities.js" ajax_list_externalFile='cities.asp')

ajax-dynamic-list-countries.js
--------------------------------

Code:

	var ajaxBox_offsetX = 0;
	var ajaxBox_offsetY = 0;
	var ajax_list_externalFile = [COLOR=red]'countries.asp';[/color]	// Path to external file
	var minimumLettersBeforeLookup = 1;	// Number of letters entered before a lookup is performed.

	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;

  		var f1=setTimeout('ajax_list_activeInput.focus()',1);
  		var f2=setTimeout('ajax_list_activeInput.value = ajax_list_activeInput.value',1);

		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&letters=' + inputObj.value.replace(" ","+");
			ajax_list_objects[ajaxIndex].requestFile = url;	// Specifying which file to get
			ajax_list_objects[ajaxIndex].onCompletion = function(){ ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile,tmpIndex); };	// Specify function that will be executed after file has been found
			ajax_list_objects[ajaxIndex].runAJAX();		// Execute AJAX function
		}
	}

	function ajax_option_keyNavigation(e)
	{
		if(document.all)e = event;

		if(!ajax_optionDiv)return;
		if(ajax_optionDiv.style.display=='none')return;

		if(e.keyCode==38){	// Up arrow
			if(!ajax_list_activeItem)return;
			if(ajax_list_activeItem && !ajax_list_activeItem.previousSibling)return;
			ajax_options_rollOverActiveItem(ajax_list_activeItem.previousSibling,true);
		}
		if(e.keyCode==40){	// Down arrow
			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);
			}
		}
		if(e.keyCode==13 || e.keyCode==9){	// Enter key or tab key
			if(ajax_list_activeItem && ajax_list_activeItem.className=='optionDivSelected')ajax_option_setValue(false,ajax_list_activeItem);
			if(e.keyCode==13)return false; else return true;
		}
		if(e.keyCode==27){	// Escape key
			ajax_options_hide();
		}
	}
	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;
			if (source.nodeType == 3) // defeat Safari bug
				source = source.parentNode;
		if(source.tagName.toLowerCase()!='input' && source.tagName.toLowerCase()!='textarea')ajax_options_hide();

	}

countries.asp
-------------

Code:

<%
If (Request.QueryString("getByLetters") <> "" AND Request.QueryString("letters") <> "") Then
countries=Request.Querystring("letters")
response.write countries
end if
%>
<%
dim con,rs
.
.
.
set rs=Server.CreateObject("ADODB.Recordset")
rs.Open "select countries from Country where countries like '"&countries&"%'",con,1,2
%>
<% do until rs.eof %>
###<%=rs("countries")%>| 
    <% rs.movenext
          loop
          set rs=nothing
         set con=nothing
%>

cities.asp
------------

Code:

<%
If (Request.QueryString("getByLetters2") <> "" AND Request.QueryString("letters") <> "") Then
cities=Request.Querystring("letters")
response.write cities
end if
%>
<%
dim con,rs
.
.
set rs=Server.CreateObject("ADODB.Recordset")
rs.Open "select cities from Country where cities like '"&cities&"%'",con,1,2
%>
<% do until rs.eof %>
###<%=rs("cities")%>| 
    <% rs.movenext
          loop
          set rs=nothing
         set con=nothing
%>

Diancecht · Oct 1, 2009

If you have the same code for both options in the same page, probably the variables are being overwritten

Cheers,
Dian

tinapa · Oct 2, 2009

hi Diancecht,

on the ajax-dynamic-list.html, i changed the function ajax_showOptions to ajax_showOptions2:

Code:

.
.
<input type="text" onFocus=clearText(this) name="cities" autocomplete="off" onKeyUp="ajax_showOptions2(this,'getByLetters2',event)">
.
.

and on the ajax-dynamic-list-cities.js, i changed the function ajax_showOptions to ajax_showOptions2:

Code:

.
.
    }

    function ajax_showOptions2(inputObj,paramToExternalFile,e)
    {
.
.

but it is still not working together for the two input text field.

Diancecht · Oct 2, 2009

But you're still includinf both scripts in the same page, with the same variables.

Take a look at the html code (view source) and you will see the duplicated code.

Cheers,
Dian

Diancecht · Oct 2, 2009

My bad, you'd need and addon to do that.

What I'm trying to say is that this part is being overwritten

Code:

var ajaxBox_offsetX = 0;
    var ajaxBox_offsetY = 0;
    var ajax_list_externalFile = 'countries.asp';    // Path to external file
    var minimumLettersBeforeLookup = 1;    // Number of letters entered before a lookup is performed.

    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;

Cheers,
Dian

tinapa · Oct 6, 2009

hi dian, can you give me some more ideas how to do that?

Diancecht · Oct 6, 2009

It's a bit difficult for me to follow that code, but I'd check that ajax_list_externalFile has the correct value when accesing countries, I guess it will be pointing to cities

Cheers,
Dian

tinapa · Oct 14, 2009

hi guys, i just thought to update you regarding this challenge.

well, i was able to get it to work. what i did was just to have links to ajax.js and ajax-dynamic-list-countries.js only on the header side and put/add the cities.asp code into the countries.asp code. that's it. and it worked.

i hope this helps somebody in the future.

have a nice day!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Suggest doesnt work for both input text fields.

tinapa

Technical User

Diancecht

Programmer

tinapa

Technical User

Diancecht

Programmer

Diancecht

Programmer

tinapa

Technical User

Diancecht

Programmer

tinapa

Technical User

Similar threads

Part and Inventory Search

Sponsor