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!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Suggest doesnt work for both input text fields.

Status
Not open for further replies.

tinapa

Technical User
Nov 12, 2008
81
GB
i am trying to adapt this php suggest:


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
%>
 
If you have the same code for both options in the same page, probably the variables are being overwritten

Cheers,
Dian
 
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.


 
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
 
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
 
hi dian, can you give me some more ideas how to do that?
 
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
 
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! :)
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top