自动补全Typeahead
采用 Typeahead (Bootstrap-3-Typeahead-master)
<script type="text/javascript"
src="/js/plugins/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript">//自动补全
$("#loginInfoDisplay").typeahead({
minLength:3,//最小开始查询的字符个数
items:5,//下拉列表中最多显示的条数
source:function(query,process){//加载数据源
$.ajax({
dataType:"json",
type:"POST",
url:"vedioAuth_autocomplate.do",
data:{str:query},
success:function(data){//这个data就是一个json对象的数组{id:xx,username:xxxx}
if(data && data.length){
process(data);//process就是交给我们获得数据之后用来调用的方法,这个方法执行了,下拉列表就出来了
}
}
});
},
//用来告诉typeahead怎么显示json对象中的内容
displayText:function(item){
return item.username
}
}).change(function(){
var current = $(this).typeahead("getActive");
if(current){
$("#loginInfoValue").val(current.id);
}
});
</script>
<div class="col-sm-6">
<div class="dropdown" id="autocomplate">
<input type="text" class="form-control" id="loginInfoDisplay"
autocomplete="off" /> <input type="text" name="loginInfoValue" id="loginInfoValue"/>
</div>
</div>
=========================================================================
/**
* 用于用户的automcomplate
*/
@RequestMapping("vedioAuth_autocomplate")
@ResponseBody
public List<Map<String, Object>> autoComplate(String str){
return userinfoService.autoComplate(str);
}
=============================================================
@Override
public List<Map<String, Object>> autoComplate(String keyword) { return this.userinfoMapper.autoComplate(keyword);
}
=============================================================
<select id="autoComplate" resultType="hashmap">
SELECT id,username
FROM logininfo WHERE username LIKE concat(#{keyword},'%')
</select>
自动补全Typeahead的更多相关文章
- bootstrap - typeahead自动补全插件
$('#Sale').typeahead({ ajax: { url: '@Url.Action("../Contract/GetSale")', //timeout: 300, ...
- jquery input 搜索自动补全、typeahead.js
最近做个一个功能需要用到自动补全,然后在网上找了很久,踩了各种的坑 最后用typeahead.js这个插件,经过自己的测试完美实现 使用方法:在页面中引入jquery.jquery.typeahead ...
- angular-ui-bootstrap typeahead 智能提示 自动补全 获取焦点不触发问题的解决
项目中有一处使用了angular-ui-bootstrap中的typeahead来实现输入框智能提示语自动化补全的功能,存在一个bug, 即输入文字后,当再次点击文本框,其获取焦点后并不会触发智能提示 ...
- 【Bootstrap】 typeahead自动补全
typeahead 这篇文章记录了我在使用typeahead的一些问题,不是很全,但是基本够用. Bootstrap提供typeahead组件来完成自动补全功能. 两种用法: 直接给标签添加属性 &l ...
- 使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。
示例代码: <input type="text" id="addr"/> <input type="text" hidde ...
- bootstrap3-typeahead 自动补全
很酷的一个自动补全插件 http://twitter.github.io/typeahead.js 在bootstrap中使用typeahead插件,完成自动补全 相关的文档:https://gith ...
- bootstrap-typeahead 自动补全简单的使用教程
参考链接: 参考1 : https://segmentfault.com/a/1190000006036166参考2 : https://blog.csdn.net/u010174173/articl ...
- jQuery 邮箱下拉列表自动补全
综述 我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能.现在我们就用jQuery来实现一下. 博主原创代码,如有代码写的不完善的地方还望大家多 ...
- eclipse自动补全的设置
eclipse自动补全的设置 如果你用过Visual Studio的自动补全功能后,再来用eclipse的自动补全功能,相信大家会有些许失望. 但是eclipse其实是非常强大的,eclipse的 ...
随机推荐
- day 46 Django 学习3 数据库单表操作以及反向解析
前情提要: Django 已经学了不少了, 今天学习链接数据库的操作.以及相关的反向解析等 一:反向解析 1:反向解析模板层 跳转时设定url会随着前面的路由改变而改变 2:反向解析之 ...
- shiro授权-记调试过程
根据张开涛老师的shiro教程学习过程中 感觉shiro授权这块有点绕 调试了十几遍 大概有个思路 记录一下 1.单元测试入口 2.subject().isPermitted("+user ...
- 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...
- 配置豆瓣镜像作为python 库的下载源
配置豆瓣镜像作为python 库的下载源 Windows 下如下配置:
- zabbix 自定义 key (转)
转自:http://www.cnblogs.com/miclesvic/p/6164303.html 1.在zabbix_agent端zabbix_agentd.conf配置文件中增加自定义Key(/ ...
- 从一个例子学习 instanceof 和 getclass 的区别
判断两个对象是否为同一类型,时常用到getclass 和 instanceof ,而这两个函数又是时常让人混淆.下面从一个例子说明两者的区别: public class Test_drive { pu ...
- spring自定义注解拦截器的配置
1.创建注解文件 (文件格式为注解) 这里面什么都不需要写 文件名就是注解名称 如下 是@anno package com.ABC123.anno; import java.lang.annotati ...
- cygwin 安装.
在线安装, http://www.cygwin.com/ 64位的,下载安装. 先装的低配的,只有几个组件装了,不然全部装太大,下次需要再装... binutils gcc gdb windows ...
- EF CodeFirst Mirgration
新建类库Models,加入以下三个类: Product: public class Product { /// <summary> /// 编号 /// </summary> ...
- Android中实时预览UI和编写UI的各种技巧
一.啰嗦 之前有读者反馈说,你搞这个所谓的最佳实践,每篇文章最后就给了一个库,感觉不是很高大上.其实,我在写这个系列之初就有想过这个问题.我的目的是:给出最实用的库来帮助我们开发,并且尽可能地说明这个 ...