<!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的orm（四）

    开始准备生成sql 在上一篇里,我们已经取到了我们在生成sql语句中所需要的信息,这一篇里我们开始根据class来生成我们需要的sql.在这之前我们先确认几件事情 sql里的参数我们使用占位符的形式. ...

  2. 撩课-Web大前端每天5道面试题-Day19

    1.实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number.String.Object.Array.Boolean)进行值复制 考察点1:对于基本数据类型和引用数据 ...

  3. IDEA 中edit configurations加号找不到tomcat server

    前言:在本机 idea 中搭建 springMVC 项目,正准备配置 Tomcat 时,发现没有 tomcat server 选项,而我的 idea 是有这个插件的,所以解决问题的方案应该是另一个地方 ...

  4. SpringMVC+MyBatis+MySQL 8小时链接断开

    org.springframework.web.util.NestedServletException: Request processing failed; nested exception is ...

  5. python Django html 模板循环条件

    views里返回数据为例: renturn render(request,'xxx.html',{'obj':123,'k1':[1,2,3,4],'k2':{'name':'yooma','age' ...

  6. springJDBC 中JdbcTemplate 类方法使用

    一,Dao IUserinfDao package com.dkt.dao; import java.util.List; import com.dkt.entity.Userinfo; public ...

  7. CSS选择器之伪类选择器（元素）

    :first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元 ...

  8. ENVI对一种WGS84投影不支持的情况说明

    作者:朱金灿 来源:http://blog.csdn.net/clever101 假如wkt字符串这样描述WGS84投影: GEOGCS["GCS_WGS_1984",DATUM[ ...

  9. ZZCMS8.2 用户密码重置漏洞

    前言 一个找回密码处的逻辑漏洞, 还是有点意思的. 正文 首先是定位找回密码功能对应的代码位置,使用找回密码的功能,然后抓包即可 下面去 getpassword.php 里面看看, 首先包含了一些文件 ...

  10. Android横、竖屏幕动态切换(layout-land 和layout-port)

    下面是一个例子程序: 1.首先通过以下语句设置Activity为无标题和全屏模式: // 设置为无标题栏 requestWindowFeature(Window.FEATURE_NO_TITLE); ...