×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Suggest doesnt work for both input text fields.

Suggest doesnt work for both input text fields.

Suggest doesnt work for both input text fields.

(OP)
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 = '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;
    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
%>


 
Replies continue below

Recommended for you

RE: Suggest doesnt work for both input text fields.

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

Cheers,
Dian

RE: Suggest doesnt work for both input text fields.

(OP)
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.


 

RE: Suggest doesnt work for both input text fields.

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

RE: Suggest doesnt work for both input text fields.

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

RE: Suggest doesnt work for both input text fields.

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

RE: Suggest doesnt work for both input text fields.

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

RE: Suggest doesnt work for both input text fields.

(OP)
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! smile
 

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login


Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close