美文网首页前端开发社区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