一聚教程网:一个值得你收藏的教程网站

热门教程

Html5 list生成文本框下拉提示例子

时间:2022-06-25 18:23:33 编辑:袖梨 来源:一聚教程网

 

Html5 list生成文本框下拉提示例子

在之前,想要实现这样的功能,需要自己写下拉框的样式和一系列的 JS 代码,包括快捷键选择、选择后填充到文本框以及高亮筛选之类的。

基础属性

现在,只需要一个 Html5 属性 list 即可。list 属性需要应用到 input 框上,然后内容写一个自定义的 id

然后在任意位置放一对 datalist 标签,并给 datalist 框一个 id,和 list 属性指向的 id 一致。

在 datalist 标签下放列表项,每个列表项用 option 元标签来表示,option 标签里用 value 属性填写内容,label 属性来做提示。

下面是实例结构:

 代码如下 复制代码

 
 


 

运行代码:

 

Html5 list生成文本框下拉提示例子

与服务器交换数据原理

既然都已经可以通过 Html5 填充下拉列表了,那就还需要与服务器交换数据,在输入关键词的时候即可 Ajax 请求服务器,然后将获得的数据填充到 datalist 标签里。

这里要注意的,首先就是请求速度,要想起到提示的作用必然请求时间不能太长,最好延时不超过一秒,才能真正有作用。既然对速度要求严格,必然不能执行整个网站程序,而是单独列一个 PHP 文件,通过 Get 属性请求 JSON 数据。

请求到数据之后就遍历 JSON,然后在 datalist 标签里填充 option 标签。

热门栏目