原创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等多种浏览器. 特 ...
随机推荐
- Git命令行对照表
git init # 初始化本地git仓库(创建新仓库) git config --global user.name "xxx" # 配置用户名 git config --glob ...
- C语言之随机数
#include<stdio.h>#include<stdlib.h>#include<time.h>int main(){ srand(time(0)); int ...
- Python中的选择排序
选择排序 选择排序(Selection sort)是一种简单直观的排序算法.它的工作原理如下.首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素中继续寻找最小(大 ...
- golang关于一些新手不注意会出现的小问题
前言 最近在整理之前写程序,学习时所记录的有道云笔记,发现一些有意思的小点跟大家分享一下.如有错误请大家给指出 一.闭包 defer 闭包(匿名函数) func test(){ i, n := ,; ...
- phpcms网站搬家 至 服务器 完整并且详细过程
上传服务器空间后,才会通过搜索域名进行网页访问. 上传的过程肯定会有很多东西要修改,例如数据库怎么上传.路径怎么修改等..... 这就让大家看下,自己不断尝试后的完整搬家步骤!!! 一.上传服务器 ( ...
- Android破解学习之路(二)——Android游戏 滚动的天空破解
经过上一期的破解教程,相信大家跟我一样都是对破解是初入门,我们破解的目的是什么? 赚钱吗?百度上一大堆破解版的应用,破解的人有赚到钱吗?实实在在的说,其实也是方便自己而已. 玩个游戏,感觉过不去了,来 ...
- js作用域与执行环境(前端基础系列)
一.作用域(what?) 官方解释是:"一段程序代码中所用到的名字并不总是有效/可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域." 单从文字理解比较难懂,举个栗子: ...
- vue.js事件,属性,以及交互
这是我学习vue的第二天,今天主要学习了如何利用vue阻止事件冒泡,阻止事件的默认行为,键盘事件以及如何添加class.style这些属性,以及如何利用vue来进行数据交互,利用百度的一个API来写一 ...
- 班级博客客户端Beta阶段发布说明
班级博客客户端Beta阶段发布说明 NewTeam 2017/12/18 项目 博客园班级博客Android客户端 目录 发布方式和发布地址 新功能 修复的缺陷 对运行环境的要求 安装方法 已知的问题 ...
- javaweb学习总结(六)——Servlet开发(二)(转)
转载自 http://www.cnblogs.com/xdp-gacl/p/3763559.html 一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文 ...