Jquery Ui AutoComplete自動填寫的功能


用到的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;
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM