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

 时间:2026-04-23 15:10:44

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

在datalist中有许多option项。

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

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

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

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

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

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

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

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

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

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

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

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

如图设置了limit(显示个数),template条目模板,source条目数据源等。

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

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

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

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

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

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

  • jquery获取form表单数据的方法
  • 在VScode中如何设置水平滚动条自动可见
  • myeclipse版本怎么查看
  • js设置input的value值
  • MyEclipse配置JDK的步骤
  • 热门搜索
    土字旁的男孩名字大全 腰子怎么做 游戏名大全 驴肉火锅的做法大全 怎么去外域 赛车游戏大全 小学作文大全 小孩尿床怎么办 qq账号密码大全 经典流行歌曲大全