input框动态模糊查询，能输入，能选择
<!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框动态模糊查询，能输入，能选择的更多相关文章
- input动态模糊查询的实现方式
最近在用jQuery实现动态模糊查询的时候,找了挺久都没有找到像Vue.js的watch属性这么好用的动态模糊查询方法.就分享一下目前遇到的坑和可以实现动态查询的几种方式. 1.jQuery的chan ...
- Mybatis使用MySQL模糊查询时输入中文检索不到结果怎么办--转自http://www.jb51.net/article/88236.htm
这篇文章主要介绍了Mybatis使用MySQL模糊查询时输入中文检索不到结果的解决办法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 项目开发中,在做Mybatis动态查询时,遇到了 ...
- 一个jpa动态模糊查询的实现
最近一直在是用spring data jpa,使用起来确实方便,如果是单表的操作基本上通过方法名都可以实现,下面是一个 Specification 实现动态模糊查询的例子这个查询是通过JpaSpeci ...
- Mybatis使用MySQL进行模糊查询时输入中文检索不到结果
Mybatis使用MySQL进行模糊查询时输入中文检索时,需要在jdbcURL后增加参数 ?useUnicode=true&characterEncoding=UTF-8
- Java JDBC 模糊查询 避免输入_，%返回全部数据
Java JDBC 模糊查询 避免输入_,%返回全部数据 "SELECT * FROM employees WHERE INSTR(first_name,?)>0 " 仅供参 ...
- vue实现input输入框的模糊查询
最近在用uni-app做一个项目,使用的框架还是vue,想了好久才做出来 . HTML代码部分 <input type="text" focus class="s ...
- vue中input输入框的模糊查询实现
最近在使用vue写webapp在,一些感觉比较有意思的分享一下. 1:input输入框: <input class="s-search-text" placeholder=& ...
- 控制input框只能粘贴，不能输入
.禁用文本框的onkeydown事件 <input type="text" onkeydown="return false"> .改造,可以使用ct ...
- MyBatis做动态模糊查询时,like后面要不要加单引号？？
做项目遇到了个奇怪的问题,项目里面要对商品.账户.进行分别的多条件查询,于是我就采用动态多条件分页查询,起初在做账户部分的时候Mybatis是这样写的 <!-- 动态多条件分页查询 --> ...
随机推荐
- Storm框架：Storm整合springboot
我们知道Storm本身是一个独立运行的分布式流式数据处理框架,Springboot也是一个独立运行的web框架.那么如何在Strom框架中集成Springboot使得我们能够在Storm开发中运用Sp ...
- JDK安装与环境变量全过程-鹏鹏
首先先讲下JDK的含义以及用处: JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行环境(JVM+Jav ...
- java单例模式的心得
由于设计模式对于java高级开发人员来说是非常重要的,网上也有很多关于设计模式的文章,博客等.所以,首先我对相对简单的单例模式做一个简单的总结. 一.实现方式 单例模式的实现方式有3种,分别是饿汉式, ...
- 在windows上搭建redis集群(redis-cluster)
一 所需软件:Redis.Ruby语言运行环境.Redis的Ruby驱动redis-xxxx.gem.创建Redis集群的工具redis-trib.rb 二 安装配置redis redis下载地址 ...
- Android平台接入Facebook登录
官方教程地址: https://developers.facebook.com/docs/android/getting-started 开发环境为Android Studio,官方要求SDK最低版本 ...
- 云数据库HBase助力物联网，免费申请中
云数据库HBase免费申请地址:https://cn.aliyun.com/product/hbase 引言 从有线互联网到无线互联网,本质是加强了人与人之间随时随地的关联.下一个互联的时代是万物互联 ...
- java变量常量
1. java 变量遵循先声明,再赋值,后使用的原则. 一个变量可以只声明,不赋值,没有问题(只是这个变量没有实际意义,但完全没有问题).但如果想要使用它,那么就一定要给它赋值,而大多数时候我们又不知 ...
- 深入浅出React的一些细节——State
(来源于: https://facebook.github.io/react/docs/state-and-lifecycle.html 翻译by:@TimRChen) Using State Cor ...
- Eclipse连接sqlserver体验过程
以前装的sqlserver 2008试用期到了,就按照网上的步骤,彻底删除了sqlserver,然后又重新装了下,再用eclipse连接的时候,发现提示TCP/IP被禁用,然后找到了sqlserver ...
- 【日常记录】【unity3d】 OnTriggerEnter 和 OnCollisionEnter (2D) 的区别
问题:两个物体A,B 两者都有碰撞体 collider(Box Collider,Sphere Collider,Capsule Collider等)当两物体相撞时,会进入 OnTriggerEnte ...