Javascript 输入元素的值发生更改但未显示在浏览器中？_Javascript_Html_Ajax_Livesearch

Javascript 输入元素的值发生更改但未显示在浏览器中？

javascript html ajax

Javascript 输入元素的值发生更改但未显示在浏览器中？,javascript,html,ajax,livesearch,Javascript,Html,Ajax,Livesearch,我为我表单的一部分编写了一个实时搜索字段，当用户点击其中一个建议时，会调用js函数（selectedService）来获取用户点击的li的innerHTML！当您在浏览器的“Inspect Element”中查看代码时，一切都可以完美地工作，但在网页上看不到用户单击建议上的后，输入元素的值属性在代码中更改，但在浏览器中更改。输入字段的内容仍然是用户在其中键入的内容代码如下： <!DOCTYPE html> <html dir="rtl"> <head>

我为我表单的一部分编写了一个实时搜索字段，当用户点击其中一个建议时，会调用

js

函数（

selectedService

）来获取用户点击的

li

的

innerHTML

！当您在浏览器的“Inspect Element”中查看代码时，一切都可以完美地工作，但在网页上看不到

用户单击建议上的后，输入元素的值属性在代码中更改，但在浏览器中更改。输入字段的内容仍然是用户在其中键入的内容

代码如下：

<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
</head>
<body>

<input value="" id="services" placeholder="click or type plz..."/>
<ul id="suggestions">
</ul>
<style>
    /* some styles */
</style>
<script>
var input = document.getElementById("services");
var suggestions = document.getElementById("suggestions");

input.oninput = function() {
    var q = input.value;

    if (q.length < 2) {
        suggestions.setAttribute("style","display: none");
        return;
    }
    var xhr2 = new XMLHttpRequest;
    xhr2.open("GET", "theURL/service-request-handler.php?q="+q, true);
    xhr2.onreadystatechange = function() {
        if (xhr2.readyState == 4 && xhr2.status == 200)
        {
            var result = xhr2.responseText;
            console.log("server response = "+result);
            var json = JSON.parse(result);
            showSuggestions(json);
        }
    };
    xhr2.send();
};

function showSuggestions(json) {
    suggestions.setAttribute("style","display: block");
    var li_list = '';
    var i = 0;
    for (i=0; i<json.length; i++) 
        li_list += '<li id="'+i+'" onclick="selectedService('+i+')">'+json[i]+'</li>';

    suggestions.innerHTML = li_list;
}

function selectedService(i) {
    li_target = document.getElementById(i);
    console.log(li_target.innerHTML);
//    input.innerHTML = li_target.innerHTML;
    input.setAttribute("value",li_target.innerHTML);
    suggestions.setAttribute("style","display: none");
}


</script>

</body>
</html>




/*一些风格*/
var输入=document.getElementById（“服务”）；
var建议=document.getElementById（“建议”）；
input.oninput=函数（）{
var q=输入值；
如果（q.长度<2）{
建议.setAttribute（“样式”，“显示：无”）；
返回；
}
var xhr2=新的XMLHttpRequest；
open（“GET”，“theURL/service request handler.php？q=“+q，true”）；
xhr2.onreadystatechange=函数（）{
如果（xhr2.readyState==4&&xhr2.status==200）
{
var result=xhr2.responseText；
console.log（“服务器响应=”+结果）；
var json=json.parse（结果）；
showSuggestions（json）；
}
};
xhr2.send（）；
};
函数showSuggestions（json）{
setAttribute（“样式”，“显示：块”）；
var li_list=''；
var i=0；
对于（i=0；i您可以使用jQuery UI进行自动完成搜索。
您可以直接设置值
属性：
input.value=li_target.innerHTML；
可能您正在使用firefox浏览器，您应该使用它在chrome和firefox中工作
input.value=li\u target.innerHTML；

这是因为属性和属性不同
属性是在HTML标记上定义的，但属性是在DOM上定义的。
函数selectedService（i）{li_target=document.getElementById（i）；console.log（li_target.innerHTML）；//input.innerHTML=li_target.innerHTML；input.setAttribute（“textContent”，li_target.innerHTML）；suggestions.setAttribute（“style”，“显示：无”）；}您能试试吗this@Suresh单击的选项位于标记后面，而不是value属性。如下所示：selected option…仍然没有任何用处：（我可以得到任何JSFIDLE链接吗？当你尝试input.value=li_target.innerHTML；@Suresh我可以，但是php
脚本呢？！我还没有尝试过。我现在就做！做不到…我必须使用纯js
input.value = li_target.innerHTML