Jquery ui autocomplete recherche de mots dans un ordre aléatoire et de liaison à l'URL

Question

J'essaie d'implémenter la saisie semi-automatique jquery-ui, mais avec des fonctionnalités personnalisées. J'essaye de rechercher l'étiquette et la description et puis une fois choisi pour aller à l'url.

J'ai implémenté la recherche d'étiquettes et de descriptions avec des mots dans n'importe quel ordre, mais pour cette raison, je ne peux pas faire référence à item.desc ou item.url dans _renderItem ou dans la fonction select.

Je suis sûr qu'il y a quelque chose de simple qui me manque ici, donc tout conseil serait génial. Merci d'avance.

$(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

Après avoir regardé votre stylo code, j'ai une suggestion. Personnellement, je ne suis pas un fan de .map() donc j'évite de l'utiliser dans la plupart des cas.

Voici ma suggestion:

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); 
    }; 
}); 

Exemple de travail: https://jsfiddle.net/Twisty/qeqymya1/

Lorsque les données repassant à responseFunc, vous voulez passer un tableau d'objet qui contient toutes les éléments que vous désirez. Votre code d'origine n'a transmis qu'un tableau contenant les étiquettes correspondantes.

Cette solution renvoie un tableau d'objets contenant les éléments label, desc et url.