如何从自动完成函数中获得onChange事件的完整值

Question

首先，我是Javascript新手。我需要具体的帮助，而不仅仅是解释该怎么做。谢谢!

问题描述:

我有一个文本字段，在用户开始输入后，生成一个下拉列表，其中包含数据库....中的值基本上是自动补全功能。

根据该文本字段中的值，需要使用该值启动另一个进程。但问题是，该值只是用户在字段中输入的值，而不是用户最终从自动完成列表中选择的值。

的例子:

我输入"bo"，自动补全列表生成"boeing"。我点击波音来填写字段…但拾取的值是"bo"

如何捕获完整的值并在下面解释的onChange事件中使用它?

具体的东西:

1)字段:

<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)函数htmlData需要字段的值(onChange事件)，但如上所述，只有用户类型存储在此。价值，而不是从列表中选择什么。我想通过这个打印用户选择的值:onChange = " htmlData("get_model.php"、"ch = ' + this.value)但是，它不会打印完整的值"boeing"，而是打印"bo"，这是用户在生成列表时输入的值。

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);
}

初始化的php脚本"get_model.php"打印值:

 echo $_GET['ch'];  

用于自动补全的其他函数:

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

您需要监听您创建的列表中的事件—您能否给出填充autoSuggestionsList的输出示例

例如，它可能是由以下行添加的列表:

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

可以给你

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

你可以在<li>上设置一个事件监听器…

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

这将取代输入字段