<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <input type="text" name="batch" placeholder="设备号" class="form-control" id="batch"  list="batch_list" autocomplete="off">

 <!-- 选择内容 -->

 <datalist id="batch_list">

 </datalist>

 <!-- 动态加载选择的内容 -->

 <script>

     $('input#batch').bind('keyup', function () {

         var batch = $('input#batch').val();

         $.ajax({

             url: "/search_batch/",

             type: "GET",

             dataType: 'json',

             data: {'batch': batch},

             async: false,

             success: function (arg) {

                 $('datalist#batch_list').empty();

                 for (var i = 0; i < arg.length; i++) {

                     var add_options = '<option value="' + arg[i] + '">'+ arg[i] + '</option>';

                     $('datalist#batch_list').append(add_options);

                 }

             }

         })

     });

 </script>

 </body>

 </html>

注意：

1、 关闭输入框的历史记录功能 ，autocomplete="off"。否则会将用户的输入历史记录也显示出来。

2、datalist标签的id要与input标签的list属性的值一致。

3、动态获取input的输入值，给input标签绑定“keyup”事件。

4、本实例使用了jQuery和bootstrap框架。

input框动态模糊查询，能输入，能选择的更多相关文章

  1. input动态模糊查询的实现方式

    最近在用jQuery实现动态模糊查询的时候,找了挺久都没有找到像Vue.js的watch属性这么好用的动态模糊查询方法.就分享一下目前遇到的坑和可以实现动态查询的几种方式. 1.jQuery的chan ...

  2. Mybatis使用MySQL模糊查询时输入中文检索不到结果怎么办--转自http://www.jb51.net/article/88236.htm

    这篇文章主要介绍了Mybatis使用MySQL模糊查询时输入中文检索不到结果的解决办法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下   项目开发中,在做Mybatis动态查询时,遇到了 ...

  3. 一个jpa动态模糊查询的实现

    最近一直在是用spring data jpa,使用起来确实方便,如果是单表的操作基本上通过方法名都可以实现,下面是一个 Specification 实现动态模糊查询的例子这个查询是通过JpaSpeci ...

  4. Mybatis使用MySQL进行模糊查询时输入中文检索不到结果

    Mybatis使用MySQL进行模糊查询时输入中文检索时,需要在jdbcURL后增加参数   ?useUnicode=true&characterEncoding=UTF-8

  5. Java JDBC 模糊查询 避免输入_，%返回全部数据

    Java JDBC 模糊查询 避免输入_,%返回全部数据 "SELECT * FROM employees WHERE INSTR(first_name,?)>0 " 仅供参 ...

  6. vue实现input输入框的模糊查询

     最近在用uni-app做一个项目,使用的框架还是vue,想了好久才做出来 . HTML代码部分 <input type="text" focus class="s ...

  7. vue中input输入框的模糊查询实现

    最近在使用vue写webapp在,一些感觉比较有意思的分享一下. 1:input输入框: <input class="s-search-text" placeholder=& ...

  8. 控制input框只能粘贴，不能输入

    .禁用文本框的onkeydown事件 <input type="text" onkeydown="return false"> .改造,可以使用ct ...

  9. MyBatis做动态模糊查询时,like后面要不要加单引号？？

    做项目遇到了个奇怪的问题,项目里面要对商品.账户.进行分别的多条件查询,于是我就采用动态多条件分页查询,起初在做账户部分的时候Mybatis是这样写的 <!-- 动态多条件分页查询 --> ...

随机推荐

  1. Form表单和里边的小部件

    一.Form表单:form表单是用来收集用户信息,并向后台提交信息的区域表单: 1.属性 “action” 是 “行为“的意思,该属性的值表示:用户提交信息到哪个页面: 2.属性”method“ 是” ...

  2. hdu 1885

    Key Task Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  3. MySQL的排序方式

    MySQL中 进行排序的方式: Select * from 表名 [where 条件 order by  字段名(默认的是ASC升序排列)] ASC是升序排列,DESC用来指定降序排列 Oracle中 ...

  4. flask-login的使用3

    # coding=utf-8 import flask app = flask.Flask(__name__) app.secret_key = 'super secret string' impor ...

  5. Redis在windows下安装过程(转载)

    转载自(http://www.cnblogs.com/M-LittleBird/p/5902850.html) 一.下载windows版本的Redis 官网以及没有下载地址,只能在github上下载, ...

  6. Java集合 -- HashSet 和 HashMap

    HashSet 集合 HashMap 集合 HashSet集合 1.1 Set 接口的特点 Set体系的集合: A:存入集合的顺序和取出集合的顺序不一致 B:没有索引 C:存入集合的元素没有重复 1. ...

  7. 网鼎杯 pwn 记录

    题目位置 https://gitee.com/hac425/blog_data/tree/master/wdb babyheap 通过分配和释放构建 2 个 fastbin 链 利用 show 功能, ...

  8. 多张报表导出到一个多sheet页excel

     业务需求: 通过勾选不同的报表名称,然后直接执行导出excel.并且这些报表需要统一导入到一个excel的多个sheet页中,并且对某些报表可能需要增加一些类似'已审核'之类的图片(展现时并没有 ...

  9. JSON学习笔记-3

    JSON 对象 1.对象语法 JSON 对象使用在大括号({})中书写. 对象可以包含多个 key/value(键/值)对. key 必须是字符串,value 可以是合法的 JSON 数据类型(字符串 ...

  10. JSON学习笔记-2

    JSON的语法 1.JSON 数据的书写格式是:名称/值对. "name" : "我是一个菜鸟" 等价于这条 JavaScript 语句: name = &qu ...