html 如何实现input输入框自动补全

来源：互联网 2023-03-16 19:11:53 124

本经验介绍在html/js开发中，如何实现input输入框自动补全。应用场景如：需要提示用户输入框的可输入内容，或者为了快速输入。

html 如何实现input输入框自动补全？

工具/原料

首先提一下jQuery自带的autocomplete自动补全功能。在页面代码中，设置input的list属性为一个datalist。

在datalist中有许多option项。

html 如何实现input输入框自动补全？

在input框中输入文字，下面会自动显示含有该输入字符串的条目。

上下选择，enter键输入即可。也可以点击。

html 如何实现input输入框自动补全？

2相关内容未经授权抓取自百度经验

下面说使jquery.autocompleter.js，需要引入如图三个文件。jQuery也可以是其他版本。

html 如何实现input输入框自动补全？

在html页面的head标签中，使用link引用css，使用script引用js代码文件。如图。

html 如何实现input输入框自动补全？

接下来，添加一个script标签，标签内代码是页面载入完毕后运行的。

如图，创建一个list，表示数据项。

使用 $(...).autocompleter({设置项}) 进行初始化。

如图设置了limit（显示个数），template条目模板，source条目数据源等。

html 如何实现input输入框自动补全？

这个id为nope的input标签就在body当中，如图所示。其设定和普通input输入框无区别。

html 如何实现input输入框自动补全？

如图是自动补全效果。输入文字，下面自动弹出自动补全项目，上下选择或者点击确认，会将那个条目的value填入。

html 如何实现input输入框自动补全？

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML

上一篇：网页怎么把内容靠右边下一篇：UWP WebView如何引用应用包内html和js