jquery ui自动完成搜索词的随机顺序和链接到url

Question

我想实现jquery-ui自动完成，但有一些自定义功能。我正在尝试搜索标签和描述，然后选择一次即可访问该网址。

我已经实现了以任何顺序搜索标签和描述的单词，但正因为如此，我似乎无法引用_renderItem或select函数中的item.desc或item.url。

我相信有一些简单的我在这里失踪，所以任何建议都会很棒。 在此先感谢。

$(function() { 

     var adminPages = [ 
      { 
       "label": "Manage pages", 
       "desc": "here is some text", 
       "url": "/managepages.aspx"      
      }, 
      { 
       "label": "Manage Navigation", 
       "desc": "here is some text", 
       "url": "/managenavigation.aspx" 
      } 
     ]; 
     //var result = adminPages.map(a => a.label); 
     var result = $.map(adminPages, function (n, i) { 
      return [[n.label, n.desc]]; 
     }); 

     $(".admin-search").autocomplete({ 
      source: function (requestObj, responseFunc) { 
       var matchArry = result.slice(); //-- Copy the array 
       var srchTerms = $.trim(requestObj.term).split(/\s+/); 

       //--- For each search term, remove non-matches. 
       $.each(srchTerms, function (J, term) { 
        var regX = new RegExp(term, "i"); 
        matchArry = $.map(matchArry, function (item) { 
         return regX.test(item) ? item : null; 
        }); 
       }); 

       //--- Return the match results. 
       responseFunc(matchArry); 
      }, 
      select: function (event, ui) { 
       //window.location = ui.item.url; 
      } 

     }) 
     .data("ui-autocomplete")._renderItem = function (ul, item) { 
      return $("<li>") 
       .append("<a>" + item.label + 
        "<br><span style='font-size: 80%;'>Desc: " + item.desc + "</span>" + 
        "<br><span style='font-size: 80%;'>Url: " + item.url + "</span></a>") 
       .appendTo(ul); 
     }; 
    }); 

Code pen example

Answer 1

查看您的代码笔后，我有一个建议。就个人而言，我不是.map()的粉丝，所以我在大多数情况下避免使用它。

这里是我的建议：

的JavaScript

$(function() { 

    var adminPages = [{ 
    "label": "Pages", 
    "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit libero, malesuada nec orci viverra, elementum iaculis orci.", 
    "url": "#" 
    }, { 
    "label": "Page categories", 
    "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent elit libero, malesuada nec orci viverra, elementum iaculis orci.", 
    "url": "#" 
    }]; 

    $.each(adminPages, function(i, val) { 
    $("#admin-links").append("<div class='large-8 medium-12 columns'><a href='" + val.url + "'><h2>" + val.label + "</h2></a><p>" + val.desc + "</p></div>"); 
    }); 

    $(".admin-search").autocomplete({ 
    source: function(requestObj, responseFunc) { 
     var matchArry = []; 
     var srchTerms = $.trim(requestObj.term).split(/\s+/); 

     console.log("1 - searching"); 
     $.each(srchTerms, function(J, term) { 
     $.each(adminPages, function(key, val) { 
      console.log("Is '" + term + "' in '" + val.label + "'?"); 
      if (val.label.toLowerCase().indexOf(term) != -1) { 
      console.log("Yes."); 
      matchArry.push(adminPages[key]); 
      } 
     }) 
     }); 

     //--- Return the match results. 
     responseFunc(matchArry); 
    }, 
    select: function(event, ui) { 
     console.log("2 - selected"); 
     console.log("Navigating to: " + ui.item.url); 
     window.location = ui.item.url; 
    } 

    }).data("ui-autocomplete")._renderItem = function(ul, item) { 
    return $("<li>") 
     .append("<a>" + item.label + 
     "<br><span style='font-size: 80%;'>Desc: " + item.desc + "</span>" + 
     "<br><span style='font-size: 80%;'>Url: " + item.url + "</span></a>") 
     .appendTo(ul); 
    }; 
}); 

工作实例：https://jsfiddle.net/Twisty/qeqymya1/

当将数据传回responseFunc，你想传递对象的数组包含所有你渴望的元素。您的原始代码只传递一个数组，其中包含匹配的标签。

此解决方案返回包含label,desc和url元素的对象数组。