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的更多相关文章

  1. js自动补全空白列(即缺少td的列)

    //自动补全空白列 var rows = document.getElementById("gridTable").rows; //行对象 var allcells = rows[ ...

  2. js自动补全实例

    var oInputField ,oPopDiv , oColorsUl,aColors; //初始化变量 function initVars(modelId,divId,ulId){ oInputF ...

  3. js自动补全

    <!doctype html> <html> <style> body { margin-left: 0px; margin-top: 0px; margin-ri ...

  4. Visual Studio Code使用typings拓展自动补全功能

    转自:http://blog.csdn.net/liyijun4114/article/details/51658087 参考来源: 官方介绍: https://code.visualstudio.c ...

  5. js邮箱自动补全

    邮箱自动补全js和jQuery html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  6. jquery input 搜索自动补全、typeahead.js

    最近做个一个功能需要用到自动补全,然后在网上找了很久,踩了各种的坑 最后用typeahead.js这个插件,经过自己的测试完美实现 使用方法:在页面中引入jquery.jquery.typeahead ...

  7. jQuery搜索框自动补全功能插件实现-autocomplete.js

    最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...

  8. jQuery 邮箱下拉列表自动补全

    综述 我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能.现在我们就用jQuery来实现一下. 博主原创代码,如有代码写的不完善的地方还望大家多 ...

  9. jQuery AutoComplete 自动补全

    jQuery.AutoComplete是一个基于jQuery的自动补全插件.借助于jQuery优秀的跨浏览器特性,可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器. 特 ...

随机推荐

  1. Less循环

    Less循环 在Less中,mixin可以调用它自身.通过这种递归调用,再结合Guard表达式和模式匹配,就可以写出各种循环结构.如,使用循环来创建一个网格类: .generate-columns(4 ...

  2. 谈谈form-data请求格式

    最近一直都比较忙,坚持月月更新博客的计划不得中止了,今天好不容易抽出点时间来说说最近项目中遇到的一个问题,有关request post请求格式中的multipart/form-data格式. 引言 最 ...

  3. 读Kafka Consumer源码

    最近一直在关注阿里的一个开源项目:OpenMessaging OpenMessaging, which includes the establishment of industry guideline ...

  4. 解决阿里云服务器3306端口无法访问的问题(windows server 2008r2)

    3306端口一般是指mysql数据的默认端口.郁闷了几天的问题,远程无法连接服务器上的mysql服务.今天终于得到彻底解决. 首先,你要确保在服务器上安装好Mysql,并能本地启动.修改密码(如不知道 ...

  5. 关于xampp集成开发环境的建立与初步认识

    针对于xampp集成开发环境的建立主要分大步骤:         1.把xampp的压缩包压缩到一个盘中,比如c盘:然后点击中间的那个图标开始安装,由于这个软件是配置基本已经OK了,故可以直接next ...

  6. Python入门 - 容器类型

    python的容器有四种:列表List,元祖Tuple,字典Dictionary和集合Set. 一.列表List a = [1, 2, 3, 'a', 'b', 'c'] b = 1.5 a.appe ...

  7. 防止UI穿透操作到游戏场景

    #if UNITY_EDITOR || UNITY_STANDALONE_WIN if (EventSystem.current.IsPointerOverGameObject()) { return ...

  8. java学习笔记之集合家族2

    集合体系 一.数据结构 List集合储存数据结构 <1>堆栈结构 特点:先进后出 <2>队列结构 特点:先进先出 <3>数组结构 特点:查询快,增删慢 <4& ...

  9. log4j2 项目日志组件

    在项目运行过程中,常常需要进行功能调试以及用户行为的跟踪和记录,部分人习惯使用System.out,但这并不建议,它仅仅是使用方便但不便于维护也无扩展性.相比log4j的话,log4j可以控制日志信息 ...

  10. Spring Cloud 自定义ConfigServer

    公司需要将系统配置信息中的敏感信息独立存放. 现有系统采用Spring Cloud Config提供配置信息,其中敏感信息主要是Db配置,分解本次需求: (1)数据库配置信息分离(主要是Db信息). ...