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是这样写的 <!-- 动态多条件分页查询 --> ...
随机推荐
- 关于Java中语句符号及格式的理解
关于Java中语句符号及格式的理解 这篇文章是撰写的第一篇文章,在此作一下博主是一名在读的工科研究生,种种原因,研二开始决定转行从事程序员工作.开始的自学之路并不算非常顺畅,也走了一点弯路,但一直都坚 ...
- 前端模块化(AMD和CMD、CommonJs)
知识点1:AMD/CMD/CommonJs是JS模块化开发的标准,目前对应的实现是RequireJs/SeaJs/nodeJs. 知识点2:CommonJs主要针对服务端,AMD/CMD主要针对浏览器 ...
- Eclipse的版本命名
Eclipse自3.1开始使用木星的卫星作为版本名,例如: 木卫一:伊奥 lo木卫二:欧罗巴 Europa木卫三:伽倪墨得斯 Ganymede木卫四:卡利斯托 Callisto .... Eclips ...
- 基于win32的windows画板程序
功能设计如下: 1.Graphics菜单中可选择图形,支持Rectangle, Circle, Line,选择对应图形,则相应菜单项前面加上选中标志: 2.Options菜单中包含以下选项 a.Col ...
- K：跳表
跳表(SkipList)是一种随机化的数据结构,目前在redis和leveldb中都有用到它,它的效率和红黑树以及 AVL 树不相上下,但跳表的原理相当简单,只要你能熟练操作链表, 就能轻松实现一 ...
- vscode 支持es6语法
在首选项中 设置: "jshint.enable": false, 在根目录中建立eslintrc.yml parser: babel-eslint parserOptions: ...
- JavaScript停止冒泡例子
<!DOCTYPE html><html><head><meta charset="utf-8"><title>qypt ...
- 对抗网络GAN的应用实例
https://sigmoidal.io/beginners-review-of-gan-architectures/ 嗨,大家好!像许多追随AI进展的人一样,我无法忽略生成建模的最新进展,尤其是 ...
- 专访阿里资深研发工程师窦贤明：PG与商业数据库差距并不明显
窦贤明认为, 支持类型.功能和语法丰富,性能优良 9月24日,窦贤明将参加在北京举办的线下活动,并做主题为<Greenplum分片案例分析>的分享.值此,他分享了PG.工作上的一些经历 ...
- ADB指令大全
Android Debug Bridge version 1.0.26.26 -a - directs adb to listen on all interfaces for a connection ...