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元素的對象數組。