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是这样写的 <!-- 动态多条件分页查询 --> ...
随机推荐
- AVFoundation-视频录制以及拍照
一般如果UI和UE在设计时只要求功能,对相机界面没什么要求的话,个人觉得调用系统相机(UIImagePickerController)就可以满足我们的需求比如照相或者录制视频,但是考虑界面美观性,有时 ...
- google自定义广告系列
Part1:说明 向网址添加参数以标识引荐流量的广告系列. 通过向在广告系列中使用的目标网址添加广告系列参数,您可以收集这些广告系列整体效果的相关信息,还可以了解广告系列在何处投放时效果更好.例如,您 ...
- 前端开发实用工具-Bower的使用。
参看博客:[https://segmentfault.com/a/1190000002971135]
- java实现黑客帝国数字雨特效(转)
原文出处https://www.cnblogs.com/x110/p/4239585.html 我在原文的基础上做了优化,使动画看起来更流畅,效果如下 import java.awt.*; impor ...
- 简单创建json格式文件
简单创建json格式文件 核心就两点: addProperty 添加属性(也就是加键值对) add是添加 另外的object对象 然后直接toString()输出 核心代码如下; public cla ...
- DW如何打开已经关闭的站点文件提示框
DW在已经新建成功站点后,若将站点文件提示框关闭后,如何重新打开呢?即如下图所示的提示框: 点击站点下拉菜单中的‘在站点定位’即可打开关闭的提示框.
- asp.ne如何使用javascript去验证客户端信息，如果验证成功则送往服务器端处理，否则在客户端提示用户（不返回到服务器端处理）
一.问题 在网站一般都有很多地方需要用户去填写一些信息,然后用户点击提交,将信息送往后台储存到数据库中.在这一个过程我以前做法直接在button的click事件中来判断用户输入的数据是否完整和合法,虽 ...
- [转]关于浏览器css选择器性能优化
作为一个前端开发, 我觉得很有必要了解浏览器对css选择器的解析,因为这个关系到页面的渲染,高效的方式.避开开销大的方式这些无疑为网站加载缩短了时间. 最近在新的项目中陷入了一个误区,也是出于对jqu ...
- 神奇的Flex 布局
layout是css中的一个重点.传统的页面布局是盒子模型,依赖 display属性 ,position属性 , float属性.它对于那些特殊布局非常不方便,而且定位用多了会出现挺多的bug. 所以 ...
- 1415. [NOIP2001]数的计数
☆ 输入文件:nums.in 输出文件:nums.out 简单对比 时间限制:1 s 内存限制:256 MB [题目描述] 我们要求找出具有下列性质数的个数(包含输入的自然数n): 先 ...