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. JAVA 中LinkedHashMap要点记录

    JAVA 中LinkedHashMap要点记录 构造函数中可能出现的几个参数说明如下: 1.initialCapacity 初始容量大小,使用无参构造方法时,此值默认是16 2.loadFactor ...

  2. A:点排序-poj

    A:点排序 总时间限制:  1000ms 内存限制:  65536kB 描述 给定一个点的坐标(x, y),在输入的n个点中,依次计算这些点到指定点的距离,并按照距离进行从小到大排序,并且输出点的坐标 ...

  3. [Docker网络]模拟一台交换机的拓扑

    [Docker网络]模拟一台交换机的拓扑 本例主要对Docker网络进行实际运用. 背景介绍 一台虚拟机如何模拟成一台多端口交换机分别连接多台虚拟机? bridge网桥技术 实验准备 docker d ...

  4. MySQL .msi 安装失败改用.zip安装步骤

    一开始官网下载.msi安装包,安装到配置server时无法启动,长时间卡在这里,无法继续下去.上网看了一下解决办法,发现用.zip安装包进行安装比较简单可靠. 一.利用.msi安装包安装失败后的处理 ...

  5. ##6.2 Neutron计算节点-- openstack pike

    ##6.2 Neutron计算节点 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ##6.2 Neutron计算节 ...

  6. windows配置git

    每次要使用git指令的时候都要去打开git bash 操作,太麻烦,要想直接在dos窗口下使用git指令需要再进行如下环境变量配置. 1.系统环境变量path添加:D://programFiles/g ...

  7. 【深度学习系列】用PaddlePaddle和Tensorflow实现经典CNN网络Vgg

    上周我们讲了经典CNN网络AlexNet对图像分类的效果,2014年,在AlexNet出来的两年后,牛津大学提出了Vgg网络,并在ILSVRC 2014中的classification项目的比赛中取得 ...

  8. Python初识--基础

    碎碎念 最初想写一些机器学习算法的实现类的文章,但发现自己工作经验不足,即使写出来,也只是一些应用场景十分狭隘的小实验: 了解到身边有些朋友和同学也想了解学习一下脚本语言Python(毕竟是后起之秀) ...

  9. Swagger服务API治理详解

    swager2的简介 在App后端开发中经常需要对移动客户端(Android.iOS)提供RESTful API接口,在后期版本快速迭代的过程中,修改接口实现的时候都必须同步修改接口文档,而文档与代码 ...

  10. coursera普林斯顿算法课part1里Programming Assignment 2最后的extra challenge

    先附上challenge要求: 博主最近在刷coursera普林斯顿大学算法课part1部分的作业,Programming Assignment2最后的这个extra challenge当初想了一段时 ...