<!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. ios app真正的相互！！调用

    1.需求:A应用打开B.B回跳到A   2.问题: 看到网络上的文档讲的大多数都是app单向跳转的例子,而我们在跳转到第二个app的时候往往需要返回到原来的app,虽然支付宝微信等第三方等应用会有回调 ...

  2. 【转】JUC下面线程池介绍

    介绍new Thread的弊端及Java四种线程池的使用,对Android同样适用.本文是基础篇,后面会分享下线程池一些高级功能. 1.new Thread的弊端执行一个异步任务你还只是如下new T ...

  3. 使用DOM创建xml文件

    使用DOM创建xml文件 创建xml的代码如下: public class CreateXML { public static void main(String[] args) { DocumentB ...

  4. RabbitMQ--学习资源汇

    1.RabbitMQ 实战教程 文集(alibaba) 2.RabbitMQ从入门到精通(9篇系列博文 )(anzhsoft2008 ) 3. RabbitMQ目录(nick's blog)   使用 ...

  5. BZOJ1597: [Usaco2008 Mar]土地购买(dp 斜率优化)

    题意 题目链接 Sol 重新看了一遍斜率优化,感觉又有了一些新的认识. 首先把土地按照\((w, h)\)排序,用单调栈处理出每个位置第向左第一个比他大的位置,显然这中间的元素是没用的 设\(f[i] ...

  6. 报错”Cannot read property 'addEventListener' of null“

    1.报错:Cannot read property 'addEventListener' of null 2.解决方案: 把代码放到window.onload=function(){...}里面,因为 ...

  7. github上手实践教程

    简介: SSH公私钥的使用 github的使用 git 工具的基本使用 基本步骤: 一.github的使用 1.github账号的创建[官网一步一步创建就行了,这一步骤省略] 2.创建远程仓库: 创建 ...

  8. HiveSql调优经验

    背景 在刚使用hive的过程中,碰到过很多问题,任务经常需要运行7,8个小时甚至更久,在此记录一下这个过程中,我的一些收获 join长尾 背景 SQL在Join执行阶段会将Join Key相同的数据分 ...

  9. 自定义圆角ImageView控件

    这个就当工具类用吧,因为直接是继承的ImageView.所以也具备了ImageView所有的特点,不同的是,可以自动裁剪成圆角图片.看效果吧. 效果还是不错的.使用方式: 直接在配置中添加依赖 com ...

  10. stm32f103各个型号芯片之间程序移植（stm32的兼容问题）

    1.stm32f103系列的各个型号的芯片差别一般不大,都是一些flash大小不一样,一般是向下兼容(大容量芯片兼容中容量芯片)还有晶振大小不一样.                           ...