原创js自动补全---auotocomplete
if ($("input.autocomplete_input").length > 0) {
$("input.autocomplete_input").bind('focus keydown', function (event) {
if ($(this).parent('div').prev('div').find('div.help-block').html() != '') {
$(".autocomplete-menu").css('top','167px');
} else {
$(".autocomplete-menu").css('top','142px');
}
var value = $(this).val();
autocomplete('<?=Url::toRoute(['ajax-auto-complete'])?>', value, 1, this.getAttribute('name'));
});
$("input.autocomplete_input").on('blur', function (event) {
window.setTimeout(function(){$(".autocomplete-menu").empty();$(".autocomplete-menu").hide();},200);
});
}
function sureValue(obj, inputName) {
var userId = $(obj).attr('data-id');
var userName = $(obj).attr('data-name');
$("input[name='" + inputName + "']").val(userName);
$("#autocomplete-hidden-id").val(userId);
}
function autocomplete(url, data, type, inputName) {
$(".autocomplete-menu").empty();
jQuery.ajax({
type: 'POST',
data: {'key': data, 'type': type},
url: url,
dataType: 'json',
success: function (da) {
if (da.length > 0) {
for (var p in da) {
var name = da[p].realname ? da[p].realname : da[p].username;
var chilren = '<a class="autocomplete-dataset " onclick="sureValue(this, \'' + inputName + '\')" data-id="' + da[p].id + '" data-name="' + name + '">' + da[p].username + '---' + da[p].realname + '</a>';
$(".autocomplete-menu").append(chilren);
}
}
$(".autocomplete-menu").show();
},
error: function(XMLHttpRequest, textStatus, errorThrown){
// alert(XMLHttpRequest.status);
// alert(XMLHttpRequest.readyState);
// alert(textStatus);
}
});
}
原创js自动补全---auotocomplete的更多相关文章
- js自动补全空白列(即缺少td的列)
//自动补全空白列 var rows = document.getElementById("gridTable").rows; //行对象 var allcells = rows[ ...
- js自动补全实例
var oInputField ,oPopDiv , oColorsUl,aColors; //初始化变量 function initVars(modelId,divId,ulId){ oInputF ...
- js自动补全
<!doctype html> <html> <style> body { margin-left: 0px; margin-top: 0px; margin-ri ...
- Visual Studio Code使用typings拓展自动补全功能
转自:http://blog.csdn.net/liyijun4114/article/details/51658087 参考来源: 官方介绍: https://code.visualstudio.c ...
- js邮箱自动补全
邮箱自动补全js和jQuery html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- jquery input 搜索自动补全、typeahead.js
最近做个一个功能需要用到自动补全,然后在网上找了很久,踩了各种的坑 最后用typeahead.js这个插件,经过自己的测试完美实现 使用方法:在页面中引入jquery.jquery.typeahead ...
- jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
- jQuery 邮箱下拉列表自动补全
综述 我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能.现在我们就用jQuery来实现一下. 博主原创代码,如有代码写的不完善的地方还望大家多 ...
- jQuery AutoComplete 自动补全
jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...
随机推荐
- JavaScript--我发现,原来你是这样的JS:函数表达式和闭包
一.介绍 本次博客主要介绍函数表达式的内容,主要是闭包. 二.函数表达式 定义函数的两种方式:一个是函数声明,另一个就是函数表达式. //1.函数声明写法 function fn2(){ consol ...
- sklearn.neighbors.kneighbors_graph的简单属性介绍
connectivity = kneighbors_graph(data, n_neighbors=7, mode='distance', metric='minkowski', p=2, inclu ...
- 洛谷教主花园dp
洛谷-教主的花园-动态规划 题目描述 教主有着一个环形的花园,他想在花园周围均匀地种上n棵树,但是教主花园的土壤很特别,每个位置适合种的树都不一样,一些树可能会因为不适合这个位置的土壤而损失观赏价 ...
- Cs Round#56 D Find Path Union
题意:有一棵如下的完全二叉树,求所有给定结点到根节点的路径的并有多少条边. 一开始联想到线段树,发现结点的排布很像线段树的标号.于是模仿线段树敲了一下,交上去发现3个点MLE了... 无心优化,跑去看 ...
- C# httpclient获取cookies实现模拟web登录
目前在公司做一款平台化的产品,我主要负责PC端上的开发,在产品推荐过程中为了节省开发时间很多功能模块没来得及做原生,用CEF嵌入了很多带功能web页面,与客户端进行交互从而实现功能. 在二期开发中,产 ...
- 【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集(持续更新中)
Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包 ...
- hdoj 1285 确定比赛名次 【拓扑排序】
确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- Android实战简易教程-第三十四枪(基于ViewPager和FragmentPagerAdapter实现滑动通用Tab)
上一段时间写过一篇文章<基于ViewPager实现微信页面切换效果> 里面实现了相似微信Tab的页面.可是这样的实现方法有个问题.就是以后全部的代码逻辑都必须在MainActivity中实 ...
- hdu 4409 Family Name List(LCA&有坑点)
Family Name List Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- 王磊:AI 时代物流行业的 OCR 应用
欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ OCR 是人工智能里面非常重要的基础能力之一.腾讯云人工智能产品总监王磊,结合物流场景解读了OCR技术."OCR文本识别能够优化 ...