1. if ($("input.autocomplete_input").length > 0) {
  2. $("input.autocomplete_input").bind('focus keydown', function (event) {
  3. if ($(this).parent('div').prev('div').find('div.help-block').html() != '') {
  4. $(".autocomplete-menu").css('top','167px');
  5. } else {
  6. $(".autocomplete-menu").css('top','142px');
  7. }
  8. var value = $(this).val();
  9. autocomplete('<?=Url::toRoute(['ajax-auto-complete'])?>', value, 1, this.getAttribute('name'));
  10. });
  11. $("input.autocomplete_input").on('blur', function (event) {
  12. window.setTimeout(function(){$(".autocomplete-menu").empty();$(".autocomplete-menu").hide();},200);
  13. });
  14. }
  15.  
  16. function sureValue(obj, inputName) {
  17. var userId = $(obj).attr('data-id');
  18. var userName = $(obj).attr('data-name');
  19. $("input[name='" + inputName + "']").val(userName);
  20. $("#autocomplete-hidden-id").val(userId);
  21. }
  22.  
  23. function autocomplete(url, data, type, inputName) {
  24. $(".autocomplete-menu").empty();
  25. jQuery.ajax({
  26. type: 'POST',
  27. data: {'key': data, 'type': type},
  28. url: url,
  29. dataType: 'json',
  30. success: function (da) {
  31. if (da.length > 0) {
  32. for (var p in da) {
  33. var name = da[p].realname ? da[p].realname : da[p].username;
  34. 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>';
  35. $(".autocomplete-menu").append(chilren);
  36. }
  37. }
  38. $(".autocomplete-menu").show();
  39. },
  40. error: function(XMLHttpRequest, textStatus, errorThrown){
  41. // alert(XMLHttpRequest.status);
  42. // alert(XMLHttpRequest.readyState);
  43. // alert(textStatus);
  44. }
  45. });
  46. }

原创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. DOM操作中,getElementByXXXX 和 querySelector 的区别

    1. 返回值:     getElements返回动态集合:       优: 首次查找效率高      缺: 可能造成反复查找DOM树    querySelector返回非动态集合:      优 ...

  2. OpenStack搭建遇到的问题

    前言:对于像我这种新手来说,搭建OpenStack真的很费劲,因为我总是每配置一个服务,我就想弄懂,后来搭建过程很累人,因此我想了个办法,等我搭建出来再学.我这里将记录我从开始之初到我学习,再到我毕业 ...

  3. HDU 1317XYZZY spfa+判断正环+链式前向星(感觉不对,但能A)

    XYZZY Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  4. NYOJ 417 死神来了 鸽巢原理

    死神来了 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 有一天,王小子在遨游世界时,遇到了一场自然灾害.一个人孤独的在一个岛上,没有吃的没有喝的.在他饥寒交迫将要死亡时 ...

  5. gis电子地图开发公司面临的挑战和机遇

    从上个世纪90年代开始电子地图应用就已经收到人们的关注,但是由于时代的局限性和市场经济发展的不成熟.地理信息系统系统的应用并没有得到很好的利用.只有少数的国家机构和军事系统才能够使用这些应用.随着技术 ...

  6. PostgreSQL启动main函数都干了什么(一)

    DB Version:9.5.3 环境:CentOS7.x 调试工具:GDB source:src/backend/main/main.c 56 /* 57 * Any Postgres server ...

  7. Golang学习--包管理工具glide

    上一篇文章中我们已经成功的运行了go的代码,这是我们迈出的最基础的一步. 一个项目通常会依赖很多外部的库,当依赖的库比较多的时候,手工管理就会比较麻烦,这个时候就需要包管理工具出场了,帮你管理好所有依 ...

  8. springCloud zuul网关服务

    第一步:编写application.properties文件 spring.application.name=api-gateway server.port=5555 zuul.routes.user ...

  9. Python的列表

    1. Python的列表简介 1. 1 列表的定义 列表是Python中最基本的数据结构,列表是最常用的Python数据类型,列表的数据项不需要具有相同的类型.列表中的每个元素都分配一个数字 ,即它的 ...

  10. Python爬虫(十二)_XPath与lxml类库

    Python学习指南 有同学说,我正则用的不好,处理HTML文档很累,有没有其他的方法? 有!那就是XPath,我们可以用先将HTML文档转换成XML文档,然后用XPath查找HTML节点或元素. 什 ...