javascript/html自动完成文本框

Question

我正在开发一个需要许多自动完成文本框的网页.由于我是javascript的新手,因此制作自己的自动填充文本框非常困难.所以我从互联网上搜索了很多例子,但它们只适用于单个文本框.这意味着我不能使用相同的js文件来制作另一个自动完成文本框.我也没有在stackoverflow上找到任何这样的例子.有人可以帮助我吗？

Answer 1

这是一个使用No JQUERY或No JAVASCRIPT创建自动完成的解决方案..只是简单的html5输入框和datalist标记..

<input type="text" id="txtAutoComplete" list="languageList"/><!--your input textbox-->
<datalist id="languageList">
<option value="HTML" />
<option value="CSS" />
<option value="JavaScript" />
<option value="SQL" />
<option value="PHP" />
<option value="jQuery" />
<option value="Bootstrap" />
<option value="Angular" />
<option value="ASP.NET" />
<option value="XML" />
</datalist>

在这里更多地关注它

Answer 2

将JQuery与AutoSuggest插件一起使用.

http://docs.jquery.com/Plugins/autocomplete

包括JS库(参见上面的文档),然后在HTML中执行此操作:

<input type="text" class="autocomplete" name="n1" />
<input type="text" class="autocomplete" name="n2" />
<input type="text" class="autocomplete" name="n3" />
<input type="text" class="autocomplete" name="n4" />

然后在Javascript中的CSS类中添加一个自动完成:

var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$(".autocomplete").autocomplete(data);

Answer 3

我建议检查一下:

http://complete-ly.appspot.com/

简单的案例应符合您的要求:

var cly = completely(document.getElementById('a-div-wrapping-your-autocomplete-box');
cly.options = [ 'your','array','of','options','(possibly sorted somehow)'];

Answer 4

该AutoSuggest插件已被弃用,现已包含在内jQuery UI.

看看这个:http:
//jqueryui.com/demos/autocomplete/