JavaScript自动完成，无需外部库

有没有一个JavaScript自动完成库不依赖于任何其他库？

我不使用jQuery或类似的，因为我正在制作一个移动应用程序，我需要保持额外的光线。

Answer 1

这是一个基本的JavaScript示例，可以修改为一个自动完成控件：

HTML

<input type="text" onkeyup="changeInput(this.value)"> <div id="result"></div> 

JavaScript的

 var people = ['Steven', 'Sean', 'Stefan', 'Sam', 'Nathan']; function matchPeople(input) { var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i'); return people.filter(function(person) { if (person.match(reg)) { return person; } }); } function changeInput(val) { var autoCompleteResult = matchPeople(val); document.getElementById("result").innerHTML = autoCompleteResult; } 

Answer 2

自动完成脚本的核心将是对术语词典的ajax调用。

我假设你的移动应用程序已经包含了一个Ajax函数，所以也许你最好从头开始写自动完成？ 基本上你只需要一个input标签，一个触发ajax调用的keyup事件处理函数和一个div来收集响应。

[更新]根据评论，来自John Resig博客的一些参考文献：

http://ejohn.org/blog/revised-javascript-dictionary-search/

http://ejohn.org/blog/jquery-livesearch/

Answer 3

对于任何在2017年以后需要简单解决scheme的人来说，您可以使用HTML5的内置<datalist>标记，而不是依赖于JavaScript。

例：

 <datalist id="languages"> <option value="HTML"> <option value="CSS"> <option value="JavaScript"> <option value="Java"> <option value="Ruby"> <option value="PHP"> <option value="Go"> <option value="Erlang"> <option value="Python"> <option value="C"> <option value="C#"> <option value="C++"> </datalist> <input type="text" list="languages"> 

请注意，这将无法在Safari中使用（截至2017年4月）。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

Answer 4

我曾经通过发送一个JSON请求回到服务器，并使用Python代码来完成自动完成。 这有点慢，但是却节省了大量的数据。