美文网首页前端开发社区Web前端之路让前端飞
关于jquery的autocomplete(自动联想填充的基本用

关于jquery的autocomplete(自动联想填充的基本用

作者: f5751996a729 | 来源:发表于2017-03-24 17:38 被阅读281次

总结下运用jquery的autocomplete的基本用法(自动联想填充)。
1.引入基本的jquery的包。
2.HTML 文件

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

隐藏的input用于放对应的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

相关文章

网友评论

    本文标题:关于jquery的autocomplete(自动联想填充的基本用

    本文链接:https://www.haomeiwen.com/subject/aemfottx.html