<!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. java遍历HashMap的高效方法

    https://stackoverflow.com/questions/46898/how-do-i-efficiently-iterate-over-each-entry-in-a-java-map

  2. LDA和PCA区别

    https://blog.csdn.net/brucewong0516/article/details/78684005

  3. CSS3 @font-face实现颜色大小可控的三角效果——张鑫旭

    一.我之前介绍过的三角实现效果回顾 这里所说的三角效果之等腰直角三角形效果(等边三角形有现成字符实现,没什么好说的:还有图片实现三角众人皆知,不予以说明): 1. 字符实现三角效果关于字符实现三角我早 ...

  4. Docker for Windows(一)下载与安装

    一.下载Docker for Windows 下载地址:Docker for Windows 下载完是一个安装程序,双击运行即可.注:如果您的系统不符合运行Docker for Windows的要求, ...

  5. margin相关基本知识

    什么是 margin ? CSS 边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界,元素 ...

  6. Spark2.x详解

    一.概述 Apache Spark 是一个快速的, 多用途的集群计算系统. 它提供了 Java, Scala, Python 和 R 的高级 API,以及一个支持通用的执行图计算的优化过的引擎. 它还 ...

  7. eclipse使用git命令行

    idea自带git命令,可以很方便的进行提交代码.eclipse怎么做呢,下面我简单操作一下: 第一步: 第二步: 第三步: 这样就调出来git提交的命令窗口了: 运行成功如下: 注意: git的安装 ...

  8. 一些centos 6和centos 7的区别

      CentOS 6(OLE 6,RHEL 6类似) CcnetOS 7(OLE 7,RHEL 7类似) 影响 默认文件系统 ext4 xfs 大量小文件在ext4上工作性能较好在64位linux中, ...

  9. python基础_类型_dict

    #dict字典,其实与其叫字典不如叫key-value更合适,不知道这个名是怎么来的,这个可以用来搞用户名和密码,不过搞这个不用数据库是不是显得太low了 #用花括号{}扩起来,逗号分隔每个元素,每个 ...

  10. 设置UINavigationController标题的属性

    设置UINavigationController标题的属性 self.title = @"产品详情"; [self.navigationController.navigationB ...