<!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. [日常] nginx反代websocket

    去年的事 , 随便记记 ============================================================= 2017年11月6日 记录: 获取包的选择状态: d ...

  2. __block和__weak修饰符的区别

    block下循环引用的问题 __block本身并不能避免循环引用,避免循环引用需要在block内部把__block修饰的obj置为nil __weak可以避免循环引用,但是其会导致外部对象释放了之后, ...

  3. SpringBoot(五) Web Applications: MVC

    统一异常处理 SpringBoot的默认映射 /error 码云: commit: 统一异常处理+返回JSON格式+favicon.ico 文档: 28.1.11 Error Handling 参考 ...

  4. java类中成员的初始化顺序(一)

    类被创建之后的成员的初始化顺序到底是怎么样的? 首先 不考虑继承 package com; public class DemoOne { /** * 关于类的初始化顺序 */ //不考虑继承结构的情况 ...

  5. 后台管理UI+功能

    kingRoad功能强大,丰富各种功能和插件,自定义开发功能组件及样式,使用webpack方式集成和纯html两种,UI(自定义开发和AdminLTE的集成优化),弹窗功能使用(Layer弹窗,并与框 ...

  6. Ubuntu16.04安装jupiter

    Ubuntu16.04安装jupiter 1.安装pip pip是一个安装和管理 Python 包的工具, 是 easy_install 的一个替换品.自然对应Python3,则有pip3. Pyth ...

  7. Enter键登录

    <div class="zhuce_input_ty"> <p><a id="qianlogin" onclick="U ...

  8. 【代码笔记】iOS-DropDownDemo-下拉按钮效果

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...

  9. 阿里云短信服务Java版

    短信服务管理平台 https://dysms.console.aliyun.com/dysms.htm java短信发送API    https://help.aliyun.com/document_ ...

  10. CSS 0.5px 细线边框的原理和实现方式

    细线边框的具体实现方法有:伪元素缩放或渐变,box-shadow模拟,svg画线,border-image裁剪等.要实现小于1px的线条,有个先决条件:屏幕的分辨率要足够高,设备像素比要大于1,即cs ...