输入元素的值发生变化但未显示在浏览器中？

Question

我为表单的一部分编写了一个实时搜索字段，当出现建议并且用户单击其中一个时，将调用 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>

检查元素中的结果：

如果有任何帮助或建议，我将不胜感激:)

Answer 1

您可以使用 jQuery UI 进行自动完成搜索。

Answer 2

可以直接设置value属性:

input.value=li_target.innerHTML;

Answer 3

可能您使用的是 firefox 浏览器，您应该使用它在 chrome 和 firefox 中工作。

input.value = li_target.innerHTML;

发生这种情况是因为属性和属性不同。

属性是在 HTML 标记上定义的，但属性是在 DOM 上定义的。

Answer 4

input.value = li_target.innerHTML

输入元素的值发生变化但未显示在浏览器中？

The value of input element changes but not shown in the browser(s)?

javascript

html

ajax

livesearch