Question

我需要通过ajax更新html 5 datalist 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
它提出了一个建议然后删除它，并且知道写芒果bann 这次它不能给出任何建议。为什么这个建议在数据库中是预先存在的。只给出第一个单词的建议。
http://iws.uphero.com/qwe.html

Answer 1

好的......这是问题所在。默认情况下，Datalist使用允许的选项匹配文本框中的内容。选项通过AJAX正确更改。没有改变的是“芒果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;

通过Ajax动态更新datalist

1 个答案: