Jquery ui自动完成以随机顺序搜索单词并链接到url

Question

我正在尝试实现 jquery-ui 自动完成功能，但具有一些自定义功能。我正在尝试搜索标签和描述，然后一旦选择转到 url。

我已经实现了以任何顺序使用单词搜索标签和描述，但因此我似乎无法在 _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 元素的对象数组。