使用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. SpringBoot2.0 最简单的 idea 快速创建项目

    第一步 第二步 第三步 以上就是idea快速创建springboot的方法,创建之后等maven 依赖下载完成,就可以使用

  2. JavaScript 概述

    什么是JavaScriptJavaScript 是一种具有面向对象能力的.解释型的程序设计语言. 它是基于对象和事件驱动并具有相对安全性的客户端脚本语言. 主要目的是,验证发往服务器端的数据.增加 W ...

  3. Python之requests库

    Request库 r = requests.get(url) 这个包括两个语句:Response.Request,我们重点来看一下Response Response包含了页面返回的所有信息,下面是它的 ...

  4. [Python] timeit测试代码运行效率

    python中有两种方法判断一个数是不是偶数或者奇数: In [29]: 3&1 Out[29]: 1 In [30]: 3%2 Out[30]: 1 In [31]: 4&1 Out ...

  5. WPF中修改DataGrid单元格值并保存

    编辑DataGrid中的单元格的内容然后保存是非常常用的功能.主要涉及到的方法就是DataGrid的CellEditEnding  和BeginningEdit .其中BeginningEdit 是当 ...

  6. SWIG 的应用(一)

    用 C/C++ 扩展 Python. - 如果仅使用标准 C 库函数,则可以使用 Python 自带的 ctypes 模块,或者使用 cffi. - 如果要使用自定义 C/C++ 函数,又不怕写 wr ...

  7. 使用 ctypes 进行 Python 和 C 的混合编程

    Python 和 C 的混合编程工具有很多,这里介绍 Python 标准库自带的 ctypes 模块的使用方法. 初识 Python 的 ctypes 要使用 C 函数,需要先将 C 编译成动态链接库 ...

  8. <网络编程>基本TCP套接字编程

    tcp提供了可靠传输,当tcp向另一端发送数据的时候,要求对端返回一个确认.如果没有接收到确认,tcp就重传数据并且等待更长时间,数次重传失败后,tcp才放弃. 建立一个tcp连接会发生如下事情: 服 ...

  9. Generative Adversarial Nets[Improved GAN]

    0.背景 Tim Salimans等人认为之前的GANs虽然可以生成很好的样本,然而训练GAN本质是找到一个基于连续的,高维参数空间上的非凸游戏上的纳什平衡.然而不幸的是,寻找纳什平衡是一个十分困难的 ...

  10. SQL Server 分析函数和排名函数

    分析函数基于分组,计算分组内数据的聚合值,经常会和窗口函数OVER()一起使用,使用分析函数可以很方便地计算同比和环比,获得中位数,获得分组的最大值和最小值.分析函数和聚合函数不同,不需要GROUP ...