Question

首先，我是Javascript的新手。我需要具体的帮助，不仅要解释做什么。 THX！

问题描述：

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

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

示例：

我输入“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>

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

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

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

javascript - 如何从自动完成功能获取onChange事件的完整值

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

1 个答案: