Question

First of all, I am new to Javascript. I need concrete help not only explanations of what to do. Thx!

Description of the problem:

I have a text field which after the user starts typing in it, generates a drop down list with values out of the database….basically an auto complete function.

Based on the value in this text field, another process needs to be initiated using the value. But the problem is that the value is only what the user typed in the field, not what the user eventually picked out of the auto complete list.

example:

I type in “bo” and the auto complete list generates “boeing”. I click on boeing to fill in the field… but the value picked up is “bo”.

How can I capture the complete value and use it in an onChange event explained below?

The concrete stuff:

1)the fields:

<input type=\"text\" size=\"30\" name=\"manuList\"
    id=\"inputString\" value=\"$_POST[manu_prev]\" 
    onkeyup=\"lookup(this.value);\" onblur=\"fill();\" 
    onChange=\"htmlData('get_model.php', 'ch='+this.value)/>

<div class=\"suggestionsBox\" id=\"suggestions\" 
     style=\"display: none;\">
  <img src=\"/images/upArrow.png\" 
    style=\"position: relative; top: -12px; 
            left: 30px;\" alt=\"upArrow\" />
  <div class=\"suggestionList\" id=\"autoSuggestionsList\">
      &nbsp;</div>
</div>

2) the function htmlData needs the value of the field (onChange event), but as explained above, only what the user types is stored in this.value, not what gets picked from the list. I want to print the value picked by the user by this:
onChange=\”htmlData(‘get_model.php’, ‘ch=’+this.value)
But instead of printing the complete value “boeing” it will print “bo” which is what the user typed to generate the list.

function htmlData(url, qStr)
{
   if (url.length==0)
   {
       document.getElementById("txtResult").innerHTML="";
       return;
   }
   xmlHttp=GetXmlHttpObject()
   if (xmlHttp==null)
   {
       alert ("Browser does not support HTTP Request");
       return;
   }

   url=url+"?"+qStr;
   url=url+"&sid="+Math.random();
   xmlHttp.onreadystatechange=stateChanged;
   xmlHttp.open("GET",url,true) ;
   xmlHttp.send(null);
}

The initiated php script “get_model.php” prints the value:

 echo $_GET['ch'];  

The other functions used for the auto complete:

function lookup(inputString)
{
  if(inputString.length == 0)
  {
    // Hide the suggestion box.
    $('#suggestions').hide();
  } else
  {
    $.post("rpc.php", {queryString: ""+inputString+""}, function(data)
    {
      if(data.length >0) 
      {
        $('#suggestions').show();
        $('#autoSuggestionsList').html(data);
      }
    });
  }
} // lookup

function fill(thisValue) 
{
  $('#inputString').val(thisValue);
  setTimeout("$('#suggestions').hide();", 200);
}

function GetXmlHttpObject(handler)
{
   var objXMLHttp=null
   if (window.XMLHttpRequest)
   {
       objXMLHttp=new XMLHttpRequest()
   }
   else if (window.ActiveXObject)
   {
       objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
   }
   return objXMLHttp
}

function stateChanged()
{
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
       document.getElementById("txtResult").innerHTML= xmlHttp.responseText;
   }
   else 
   {
       //alert(xmlHttp.status);
   }
}

Answer 1

You need to listen to the event on the list you create – can you give an example of the output that fills the autoSuggestionsList

For example it might be a list that is added by the following line :

$('#autoSuggestionsList').html(data);

that could give you

<div class=\"suggestionList\" id=\"autoSuggestionsList\">
      <ul id="unOrderedList">
          <li value="2">Whatever</li>
          ......
      </ul>
</div>

you can then setup an event listener on the <li>‘s…

$('#unOrderedList li').click(function(){
      var value = $(this).attr('value');
      // Do what every you want with the data.....
  });

This would replace the onchange event on the input field