用原生HTML5控件实现输入框自动提示(下拉列表)
来源:互联网 发布:宁夏干部网络培训平台 编辑:程序博客网 时间:2024/06/06 02:05
本文介绍如何使用HTML5的输入列表属性和datalist元素,你可以轻松地设置了一个自动提示的输入框,不需要依赖jQuery或JavaScript。
实现非常简单,添加 list 属性到input字段,然后创建一个datalist元素。 id值与list属性对应即可。
<input type="text" list="dataList" name="dataList" />
<datalist id="dataList">
<option label="1" value="内容1" >
<option label="3" value="内容2" >
</datalist>
vue2 中可以这样设置:
<input type="text" v-model="inputDate" list="dataList" />
<!-- <input type="text" v-model="inputDate" list="dataList" @keyup="searchApi"/> 这里可以用@keyup调用后台接口 -->
<datalist id="dataList">
<option v-for="item in arr" :label="item.id" :value="item.name" />
</datalist>
<div @click="fun">点击</div>
返回的数据是:
export default{
data(){
return {
arr:[
{id:1,name:"内容1"},
{id:2,name:"内容2"},
{id:3,name:"内容3"},
{id:4,name:"内容4"},
inputDate: "",
}
},
methods: {
fun: function(){
for(var i=0;i<this.arr.length;i++){
if(this.arr[i].name == this.inputDate){
//选中值后进行的逻辑操作
var currentId = this.arr[i].id;
}
}
}
},
}
- 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
- 用原生HTML5控件实现输入框自动提示(下拉列表)
- html5 中新的datalist 自动下拉提示输入框
- IOS邮箱登录下拉提示列表--输入邮箱自动填充提示列表(附gif+源码)
- html5实现输入框自动提示功能之------datalist标签
- 使用easyUI的combobox下拉框控件实现输入提示功能(google suggest)
- HTML5--(option)实现级联下拉列表
- 类似GOOGLE实现下拉框列表提示
- HTML5新控件 - 输入框输入提示<datalist>
- 文本框+层模拟下拉框,并实现输入自动提示和过滤
- Qt 控件 实现 QComboBox输入自动提示功能(仿Google搜索提示)
- Jquery实现自动提示下拉框
- 用mfc实现组合框控件下拉列表显示
- Datagridview控件实现下拉列表(DataGridViewComboBoxColumn)
- 重写winform 的 ComboBox控件实现自动加载磁盘下拉列表框
- input输入框禁止自动补全和下拉提示
- 可输入的Web下拉列表框控件
- 可输入的Web下拉列表框控件
- C#实现对图片文件的压缩、裁剪操作实例
- 斐讯K2路由器刷固件实现校园网可使用
- mysql navicat编码保持一致不乱码
- 一个基于UDP的回显C/S(二)
- GSON的坑
- 用原生HTML5控件实现输入框自动提示(下拉列表)
- 精华文章——Web 研发模式演变
- IP及端口号的获取及保存【实用】
- Ef中去重
- java集合框架-ArrayList
- 配置win32控制台输出文本属性
- JPush Android 推送如何区分开发、生产环境
- 实验六:实现二叉树链式存储结构
- Android应用程序启动过程上