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是这样写的 <!-- 动态多条件分页查询 --> ...
随机推荐
- Maven 项目管理从未如此通畅
一,写在前面 Maven到底是什么?它能做些什么?能为我们的开发工作提供什么样的帮助?为什么会有如此大的知名度?另外,常听大厂的人说“私服”,工具管理吧啦吧啦的一堆也是不明觉厉.相信仁者见仁,着智者见 ...
- 依赖注入（一）构造函数注入（PHP）
构造函数注入(constructor injection)是依赖注入最常见的形式之一. 由名称可以看出,该技术需要我们把所有依赖显示的体现在构造函数中. 好了,直接上代码: <?php /** ...
- egg.js-基于koa2的node.js入门
一．Egg.JS 简介 Egg.JS是阿里开发的一套node.JS的框架,主要以下几个特点: Egg 的插件机制有很高的可扩展性,一个插件只做一件事,Egg 通过框架聚合这些插件,并根据自己的业务场景 ...
- jquery实现复选框全选，全不选，反选中的问题
今天试了一下用jquery选择复选框,本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法. html代码如下(这里没有用任何样式,就没有再放css了): <html> <h ...
- 或许你并不需要jQuery
此文为翻译文章,原文链接:you might not need jquery jQuery 和它的相关插件都是很强大的,使用它们让我们的应用开发变得简单.如果你正在开发另一个库,请花点时间思考以下,你 ...
- linux erlang环境安装
1.安装环境:yum -y install make gcc gcc-c++ kernel-devel m4 glibc-devel autoconfyum -y install ncurses-de ...
- LeetCode题解之Intersection of Two Linked Lists
1.题目描述 2.问题分析 使用unordered_set 将链表A中的节点地址全部插入,然后使用链表B中的每个节点在A中查找. 3.代码 ListNode *getIntersectionNode( ...
- leetCode题解之旋转数字
1.题目描述 X is a good number if after rotating each digit individually by 180 degrees, we get a valid n ...
- oracle数据泵备份（Expdp命令）
Oracle备份方式主要分为数据泵导出备份.热备份与冷备份三种,今天首先来实践一下数据泵备份与还原.数据泵导出/导入属于逻辑备份,热备份与冷备份都属于物理备份.oracle10g开始推出了数据泵(ex ...
- iostat 工具分析I/O性能
iostat命令用途:主要用于监控系统设备的IO负载情况,iostat首次运行时显示自系统启动开始的各项统计信息,之后运行iostat将显示自上次运行该命令以后的统计信息.用户可以通过指定统计的次数和 ...