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是这样写的 <!-- 动态多条件分页查询 --> ...
随机推荐
- Winform无边框窗体拖动
调用示例 当然,BUG还是有的,不过基本需求倒也可以
- JS获取地址栏参数&jquery
第一种:字符串拆分法 window.location.href 或者 location.href 或者 window.location 获得地址栏中的所有内容 decodeURI()可以解码地址栏中的 ...
- oracle数据库定时任务
应用系统运行中,经常需要定时执行一些任务,例如:定时更新汇总数据,定时更新状态数据等,目前 Treesoft数据库管理系统 增加[定时任务]功能,直接通过页面简单配置,即可按调度规则定时执行SQL任务 ...
- Spring Boot的快速创建
一.利用向导快速搭建Spring Boot应用 创建一个controller package com.hoje.springboot.Controller; import org.springfram ...
- AutoFac在项目中应用的体会
AutoFac的工作原理就是:注册类并映射到接口,通过注入后返回相应实例化的类! 先来简单介绍下Autofac的使用 1.通过Nuget或代码安装autofac 安装autofac :ins ...
- package.json中devDependencies与dependencies的区别
前言:之前一直不懂既然都是项目的依赖,为什么要分成两个部分,devDependencies和dependencies,有什么区别? 安装方式 我们在通过npm安装插件或库时,有三种方式: npm in ...
- 手动解除联合的ArcGIS Server
ArcGIS Server可以通过和Portal联合,组建WebGIS系统. 假如已经联合的ArcGIS Server已经无法访问,例如服务器宕机了,或者网络断开了.需要手动解除联合的ArcGIS S ...
- Oracle如何把数据库表迁移到指定表空间
问题描述: 将测试数据库中的表结果导入到正式数据库.需要在正式库中建立独立的表空间存放新导入的表,以避免和正式库中原来的表混淆. 处理步骤: 1. 在命令行中用exp指令导出测试库中指定表到指定 ...
- CSS 小结笔记之盒子模型
网页标签可以看成是一个个盒子,页面设计就像垒积木一样,在网页中将盒子摆好显示出来.在浏览器中可以很清楚的去看到一个标签的盒子,具体方法如下: 打开浏览器的开发人员工具,在Elements中选中一个标签 ...
- ThinkPHP执行调用存储过程添加日志
本文出至:新太潮流网络博客 //PHP代码部分 /** * [LogAdd 操作日志] * @param [string] $userid [用户的ID] * @param [string] $typ ...