關(guān)于jquery的autocomplete(自動(dòng)聯(lián)想填充的基本用法)

總結(jié)下運(yùn)用jquery的autocomplete的基本用法(自動(dòng)聯(lián)想填充)。
1.引入基本的jquery的包。
2.HTML 文件

       <input type="text" id="Aorg_name" class="form-control" >
       <input type="hidden"  id="Aorg_code">

隱藏的input用于放對(duì)應(yīng)的ID。
3.js文件
用ajax取得你需要的data。(假如一下子取到了)

var retData = data;
AutoCompleteForOrg(retData,$("#Aorg_name"),$("#Aorg_code"));

AutoCompleteForOrg()的方法:

function AutoCompleteForOrg(data,ele_name,ele_id) {
   $(ele_name).autocomplete({
           minLength: 0,
           source: function (req, res) {
               var term = req.term.trim();
               var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
               res($.map(data, function (el) {
                   /* Remove dashes from the source and compare with the term: */
                   if (matcher.test(el.dep_name || matcher.test(el.dep_id))) {
                       return el;
                   }
               }));
           },
           minChars: 0,
           max: 5,
           autoFill: true,
           mustMatch: true,
           matchContains: true,
           scrollHeight: 60,
           open: function (event, ui) {
               $('.ui-autocomplete').css('position', 'absolute');
           },
           focus: function (event, ui) {
               $(ele_name).attr('source', ui.item.source);
               return false;
           },
           select: function (event, ui) {
               $(ele_name).val(ui.item.dep_name);
               $(ele_id).val(ui.item.dep_id)
               return false;
           }
       })
       .data( "ui-autocomplete" )._renderItem = function(ul,item) {
       return $( "<li style='list-style:none;'>" )
           .append( "<a>" + item.dep_name + "</a>" )
           .appendTo(ul);
   };
}

4.好了,大功告成:

Paste_Image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    前端進(jìn)階之旅閱讀 16,962評(píng)論 18 503
  • 第一章 入門 基本功能:訪問(wèn)和操作 dom 元素,控制頁(yè)面樣式,對(duì)頁(yè)面的事件處理,與ajax完美結(jié)合,有豐富的插件...
    X_Arts閱讀 1,155評(píng)論 0 2
  • 每日箴言: 每個(gè)人都有選擇的權(quán)利,你不選擇我,說(shuō)明你選擇了比我更重要的東西。[http://requirejs.o...
    全棧弄潮兒閱讀 3,059評(píng)論 2 85
  • 豪氣沖天一少年,拔劍屹立大江邊。 雙目炯炯思項(xiàng)羽,誓斬今朝盜國(guó)奸。
    老槐樹(shù)閱讀 158評(píng)論 0 1
  • 承天院記當(dāng)何罪,腸斷梅花寫范滂。 瘞鶴蘭亭成大悟,南樓一醉月凄涼。 注:黃庭堅(jiān),字魯直,號(hào)山谷道人、涪翁。北宋著名...
    大氣浩然閱讀 1,122評(píng)論 0 1

友情鏈接更多精彩內(nèi)容