使用input + datalist 实现自动补全功能，其中datalist中的内容是根据input输入的内容动态变换的，代码如下

   <!DOCTYPE HTML>

    <html>

    <body>

    <script src="./jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>

    <script>

    function inputSelect(){

        var input_select=$("#input").val();

        var option_length=$("option").length;

        var option_id='';

        for(var i=0;i<option_length;i++){

            var option_value=$("option").eq(i).attr('data-value');

            if(input_select==option_value){

                option_id=$("option").eq(i).attr('data-id');

                break;

            }

        }

        console.log(input_select,option_length,option_id);

    };

    </script>

    <input list="cars"  id="input" onchange="inputSelect()"/>

    <datalist id="cars">

        <option value="111" data-value="111"  data-id="1">

        <option value="122"  data-value="122" data-id="2">

        <option value="1222" data-value="1222" data-id="4">

    </datalist>

    </body>

    </html>

原文：https://blog.csdn.net/qishuixian/article/details/78427951

html5 datalist 选中option选项后的触发事件的更多相关文章

  1. 页面加载完成后，触发事件——trigger（）

    <button id="btn">点击我</button> <div id="test"></div> 如果页面 ...

  2. input禁止输入后，触发事件，在苹果手机的页面会滚动

    在vue中,<input type="text" readonly="readonly" @click=""/>,点击跳转页面. ...

  3. 实现 select中指定option选中触发事件

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发. ...

  4. 利用js给datalist或select动态添加option选项

    <!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type=& ...

  5. Vue.js之下拉列表及选中触发事件

    老早就听说了Vue.js是多么的简单.易学.好用等等,然而我只是粗略的看了下文档,简单的敲了几个例子,仅此而已. 最近由于项目的需要,系统的看了下文档,也学到了一些东西. 废话不多说,这里要说的是下拉 ...

  6. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  7. HTML5 datalist 标签

    以前需要用JS写一个自动完成组件(Suggest),很费劲.HTML5时代则不用了,直接使用datalist标签,直接减少了工作量.如下 <!DOCTYPE html> <html& ...

  8. HTML中的<select>标签如何设置默认选中的选项

    方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  " ...

  9. javaScript 的option触发事件

    先说jquery的option触发事件,很方便 $("option:selected")//这样就能直接触发选择的option了 在JavaScript中就显得比较麻烦,其实< ...

随机推荐

  1. centos7下安装docker（18.2docker日志---ELK）

    ELK是三个软件得组合:Elasticsearch,Logstash,Kibana Elasticsearch:实时查询的全文搜索引擎.Elasticsearch的设计目的就是能够处理和搜索巨量的日志 ...

  2. vue与jquey

    vue与jquey jQuery是使用选择器($)选取DOM对象,对其进行赋值.取值.事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的.比如需要 ...

  3. C# Lambda 表达式学习之（四）：动态构建类似于 c => c.Age == 2 || c.Age == 5 || c => c.Age == 17 等等一个或多个 OrElse 的表达式

    可能你还感兴趣: 1. C# Lambda 表达式学习之(一):得到一个类的字段(Field)或属性(Property)名,强类型得到 2. C# Lambda 表达式学习之(二):LambdaExp ...

  4. 【vue】vue +element 搭建及开发中项目中，遇到的错误提示

    1. import Layout from '@/views/layout/Layout'; export default [ { // 配置路由,当路径为'/activePublic',使用组件ac ...

  5. docker 10 docker的镜像原理

    镜像是什么? 镜像是一个轻量级,可执行的软件包,用来打包运行环境和基于运行环境开发的软件包,它包含某个软件运行环境的所有内容.包括代码,运行时的库,配置文件和环境变量 UnionFs(联合文件系统) ...

  6. Vim 中使用 vimim 来输入中文

    Vim 中输入中文,要来回切换中英文,偶尔不慎的切换和按键,可能导致误删不能恢复的错误,一直是个很头疼的问题.现在有了 vimim 这个插件,整个世界清净了. 插件官方网站:http://www.vi ...

  7. leetcode 74. Search a 2D Matrix 、240. Search a 2D Matrix II

    74. Search a 2D Matrix 整个二维数组是有序排列的,可以把这个想象成一个有序的一维数组,然后用二分找中间值就好了. 这个时候需要将全部的长度转换为相应的坐标,/col获得x坐标,% ...

  8. matlab中fix函数，floor函数，ceil函数

    1)fix(n)的意义是取小于n的整数(是向零点舍入的意思是往零的方向上靠),这是一类应用在整数取值上的函数,就如同以前我们所研究的求整问题,例如,fix(pi)=3;fix(3.5)=3;fix(- ...

  9. ESP8266开发综合篇第十四节(LUA)-8266作为TCP服务器,Android客户端连接,显示温湿度,控制继电器

    前几节先略过,我先补充上大部分人迫切的需求 编写Android TCP客户端  用Android Studio 先做一下界面 然后放一个输入对话框,因为没有显示出来这个控件.所以就手写 剩下的自己研究 ...

  10. oracle impdp将导出用户的所有对象导入至另一个用户下，生成的触发器语句问题处理

    问题产生的操作步骤及详细说明: 1)操作的数据库是oracle 11g,先通过命令将用户GAS_NEW的数据导出,命令语句如下: expdp GAS_NEW/GAS_NEW@ORCL schemas= ...