javascript -如何从自动完成函数中获取onChange事件的完全值
javascript -如何从自动完成函数中获取onChange事件的完全值
提问于 2011-10-12 00:25:47
首先，我是Javascript的新手。我需要具体的帮助，而不仅仅是解释该做什么。谢谢！
问题描述：
我有一个文本字段，在用户开始在其中键入内容后，它会生成一个下拉列表，其中包含来自database....basically的值，这是一个自动完成功能。
根据此文本字段中的值，需要使用该值启动另一个流程。但问题是，值只是用户在字段中键入的值，而不是用户最终从自动完成列表中选择的值。
示例：
我输入"bo“，自动补全列表生成”波音“。我点击波音公司来填写这一栏...但是提取的值是"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\">
</div>
</div>2)函数htmlData需要字段(onChange event)的值，但如上所述，只有用户输入的内容存储在this.value中，而不是从列表中选择的内容。我想通过以下命令打印用户选择的值: onChange=\"htmlData('get_model.php'，'ch='+this.value)，但它不会打印完整的值“boeing.value”，而是打印"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);
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2011-10-12 00:41:48
您需要监听您创建的列表上的事件-您能举例说明填充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事件
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7729322
复制相关文章
相似问题
腾讯云开发者
