javascript - 如何从自动完成功能获取 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 事件），但如上所述，只有用户输入的内容存储在 this.value 中，而不是从列表中选取的内容。我想通过以下方式打印用户选择的值： 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>

在

上设置一个事件侦听器...

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

这将替换输入字段上的 onchange 事件