我需要通过 ajax 更新 html 5 数据列表。
Html 代码在这里。
<body>
<input type="text" id="bar" list="fruit" onkeyup="jsfun()" />
<datalist id="fruit"></datalist>
</body>
JavaScript 的伪代码。
function jsfun(){
//1- Get the last word from input field ("bar").
var skw1 = document.getElementById("searchBar").value;
var skw2 = skw1.split(" ");
var skw = skw2[skw2.length-1];
//2- Use Ajax to send data on server and get data result back
/*
* here goes other javascript content for ajax
*/
xmlhttp.open("GET","searchopt.php?skw="+skw,true);
xmlhttp.send();
//3- use javascript to update the datalist with those result which Ajax get.
}
看下面的网址，先写mang，然后删除它并写bann
它给出了一个建议
然后删除它，知道这次写mango bann它不能给出任何建议。为什么但建议存在于数据库中。它只为第一个单词提供建议。
http://iws.uphero.com/qwe.html
最佳答案
好的...这就是问题所在。默认情况下，Datalist 将文本框中的内容与允许的选项相匹配。这些选项可以通过 AJAX 正确更改。不变的是“mango bann”不等于“mango”或“bann”。
作为解决方法，您可以使用 AJAX 函数在输入第二个单词后覆盖文本框。例如:
var skw1 = document.getElementById("searchBar").value;
var skw2 = skw1.split(" ");
var skw = skw2[skw2.length-1];
document.getElementById("searchBar").value = skw;
关于javascript - 通过Ajax动态更新数据列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16058621/