JQuery.autocomplete扩展功能：实现多列自动提示

最近做一个项目，用到了JQuery的自动补全函数，但默认的是只显示一列数据，所以就略加修改，拿出来献丑了。

下面这个是默认调用本地数据：

$("#tags").autocomplete(["c++","java", "php", "coldfusion","javascript"], //这个参数是一个自动补全的一个数据数组，当你输入一个字符，它就会把有的显示出来，这个静态赋值//不是很好（个人觉得）。

{                  //下面是一些显示效果参数
         width: 320,
         max: 4,
         highlight: false,
       multiple: true,
          multipleSeparator: "",
       scroll: true,
        scrollHeight: 300
        });

下面这个是调用后台数据：

$("#...").autocomplete({
       source: function(resquest,response){
          $.ajax({
              url:'.........',//请求地址
              type: "post",
              dataType:"json",//返回类型
              success: function(msg){
                  response(msg);//返回需要提示的内容
              }
           });
       }
     });
以上都是一般使用。

下面是本文的重点：

下面是使用这个扩展

$(function(){
   var data=[{'model':'1221','manufacturer':'HTML'},{'model':'1221','manufacturer':'HTML'},{'model':'3221','manufacturer':'HTML212'},{'model':'789221','manufacturer':'HTML343'}];
   extendAutocomplete();
   $('#auto').multipeCln({
       showHeader : true,
       columns : [{name : 'Model', width : 200},{name : 'Manufacturer', width : 200}],//设置显示列的标题
       select: function(event, ui) {//这里操作点击提示框中数据后，显示到文本框中的样式

            this.value = ui.item.model + (ui.item.manufacturer ? '/' + ui.item.manufacturer : '');
            return false;
        },
        source:function(request,response)
           {
               response(data);
             }
   });
   });

显示效果图：

希望对大家有帮助，第一次写文章，不足之处请大家多多提点。

JQuery.autocomplete扩展功能：实现多列自动提示相关推荐

jQuery如何实现表单的自动提示
看到没有,这里用户名那个地方的自动提示用到了下面这个jQuery插件转载于:https://www.cnblogs.com/MyFlora/archive/2012/05/02/2478866.h ...
jquery autocomplete实现solr查询字段自动填充并执行查询
2019独角兽企业重金招聘Python工程师标准>>> 页面引入三个JS: <script type="text/javascript" src=" ...
input的属性AutoComplete——关闭浏览器文本框自动提示
1. 有时候我们并不需要AutoComplete,例如需要用户自己再次输入而非自动完成.只要将所在表单元素的autocomplete属性设置为off即可. <form> 请双击文本框 &l ...
jquery.autocomplete 使用解析
页面引用 <script type="text/javascript" src="${base}/autocom/jquery-1.8.2.min.js" ...
ajax+json自动提示Demo
下载地址:http://download.csdn.net/download/honghu549599aaa/4479865 Autocomplete: /*** @author :LYL*@date ...
仿百度，谷歌输入框自动提示功能
大家使用百度谷歌的时候都会有输入自动提示的功能,心血来潮自己用Ajax模拟了一个,和大家分享分享. 下面让我们先看下效果: 输入自动提示键盘上下移动选取鼠标选取同样支持支持中文匹配 JS ...
php 智能输入提示插件,PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能_php实例...
我们在很多项目中使用了搜索功能来帮助用户更快更准确的找到想要的信息.本文将介绍如何实现用户输入自动提示的功能,就像谷歌百度搜索引擎一样,当用户输入关键字时,输入框下方会有提示,将与关键字相关的信息展现 ...
jquery.autocomplete自动补全功能
1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http:// ...
优秀的 jQuery 文本输入框自动完成自动提示插件
文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作,是非常好的产品使用体验.这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件,帮助你在网站中轻松添加输入框 ...

JQuery.autocomplete扩展功能：实现多列自动提示

JQuery.autocomplete扩展功能：实现多列自动提示相关推荐

最新文章

热门文章