码迷,mamicode.com
首页 > Web开发 > 详细

Jquery Ui AutoComplete自动填写的功能

时间:2019-06-13 15:50:36      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:jquery ui   bsp   arc   size   arch   ret   数据格式   res   custom   

用到的jquery 和jquery ui 的版本如下:

jQuery v1.12.4

jQuery UI - v1.11.0

有部分版本会有一些这样那样的问题,具体原因未深究。

jquery 的代码如下

$("#id_customer").autocomplete({
            source:function (request,response) {
               var findResult = [];
               $.ajax({
                   url:"/ips/get_customername_list/",
                   data:{"term":request.term},
                   type:‘GET‘,
                   success:function(data){
                       data = JSON.parse(data);
                       console.log(data);
                       var search_cus = request.term;
                       findResult = $.grep(data,function(value,index){
                           return value.indexOf(search_cus) > -1;
                       });
                       response(data);
                   }
               });
           }
        })

ajax到后台获取的数据

后台返回的数据格式是一个数组:[‘data1‘,‘data2‘,‘data3‘........‘data100‘]

有一些需要修改的css样式,具体根据自己的情况调整:

.ui-menu {
 width: 100px;
 list-style: none;
    margin-left: -50px;
    padding-left:0px ;
}
.ui-menu  .ui-menu-item{
    background-color: #fff;
    height: 25px;
    line-height: 25px;
    text-indent: 10px;
}
.ui-menu  .ui-menu-item:hover{
    color:#fff;
    background-color: #1b6d85;
}
.ui-menu .ui-state-focus{
    color:#fff;
    background-color: #1b6d85;
}

 

Jquery Ui AutoComplete自动填写的功能

标签:jquery ui   bsp   arc   size   arch   ret   数据格式   res   custom   

原文地址:https://www.cnblogs.com/pyghost/p/11016608.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!