Как добавить дополнительное меню в автозаполнение

Question

Я настраиваю функцию автозаполнения и хочу добавить дополнительное меню (не уверен, является ли меню правильным термином).Аналогично здесь:

Пример 1 - Nike Пример 2 - Kohls

В обоих примерах есть дополнительное меню со списком предложений продуктов.

У меня уже есть функция автозаполнения, и я могу добавлять изображения.

$(function () {
function log(message) {
    $("<div>").text(message).appendTo("#log");
    $("#cities").blur();
}


$("#cities").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "index-46-sample.php",
            data: {
                keyword: request.term
            },
            dataType: 'json', // DON'T use jsonp !
            cache: false,
            success: function (data) {
                console.log(data);
                // Even on success, it may have no results...
                if (typeof (data[0]) != "undefined") {
                    // Remove the no result error in case it's displayed
                    $("#noResult").css("display", "none");
                    // For fun, count it!
                    var count = 0;
                    while (data[count]) {
                        console.log(data[count]);
                        count++;
                    }
                } else {
                    count = "NO";
                    // Display the no result error
                    $("#noResult").css("display", "inline");
                }
                console.log(count + " RESULTS");
                // Pass the data to the dropdown!
                response(data);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
            }
        });
    },
    minLength: 2,
    select: function (event, ui) {
        log(ui.item.value);
    }
});
// Show results on input focus
$("#cities").on("focus", function () {
    $("#ui-id-1").css("display", "block");
});

//highlights user input
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
    var term = this.term.split(' ').join('|');
    var re = new RegExp("(" + term + ")", "gi");
    var t = item.label.replace(re, "<b style='color: rgb(16, 141, 68)'>$&</b>");
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<div>" + t + "</div>")
        .appendTo(ul);
}; });

Answer 1

Используя Автозаполнение пользовательских данных и отображение в качестве примера, рассмотрим следующее.

$(function() {
  var imgBase = "https://jqueryui.com/resources/demos/autocomplete/images/";
  var projects = [{
      value: "jquery",
      label: "jQuery",
      desc: "the write less, do more, JavaScript library",
      icon: "jquery_32x32.png"
    },
    {
      value: "jquery-ui",
      label: "jQuery UI",
      desc: "the official user interface library for jQuery",
      icon: "jqueryui_32x32.png"
    },
    {
      value: "sizzlejs",
      label: "Sizzle JS",
      desc: "a pure-JavaScript CSS selector engine",
      icon: "sizzlejs_32x32.png"
    }
  ];

  function showItems(obj, trg) {
    if (trg == undefined) {
      trg = $(".item-list");
    }
    trg.html("");
    $.each(obj, function(index, item) {
      var itemDiv = $("<div>", {
        class: "item ui-widget-content"
      }).appendTo(trg);
      $("<img>", {
        src: imgBase + item.icon
      }).appendTo(itemDiv);
      $("<div>", {
        class: "ui-widget-header"
      }).html(item.label).appendTo(itemDiv);
      $("<div>", {
        class: "item-desc"
      }).html(item.desc).appendTo(itemDiv);
    });
  }

  $("#project").autocomplete({
    minLength: 0,
    source: projects,
    focus: function(event, ui) {
      $("#project").val(ui.item.label);
      return false;
    },
    select: function(event, ui) {
      $("#project").val(ui.item.label);
      $("#project-id").val(ui.item.value);
      return false;
    }
  });
  $("#project").autocomplete("instance")._renderMenu = function(ul, items) {
    var that = this;
    showItems(items);
    $.each(items, function(index, item) {
      that._renderItemData(ul, item);
    });
  };
});

#project-label {
  display: block;
  font-weight: bold;
  margin-bottom: 1em;
}

#project-icon {
  float: left;
  height: 32px;
  width: 32px;
}

#project-description {
  margin: 0;
  padding: 0;
}

.item-list {
  margin: 20px;
}

.item-list .item {
  display: inline-block;
  width: 150px;
  height: 150px;
  padding: 0.5em;
  margin-right: 3px;
  margin-bottom: 3px;
  text-align: center;
  border-radius: 6px;
}

.item-list .item img {
  width: 75px;
  height: 75px;
  margin: 0 auto;
}

.item-list .item .item-desc {
  font-size: 0.85em;
  width: 100%;
  text-align: left;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="https://jqueryui.com/resources/demos/autocomplete/images/transparent_1x1.png" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id">
<div class="item-list ui-widget"></div>

Хитрость здесь в том, чтобы использовать _renderMenu, поскольку в нем будет Объект, содержащий все потенциальные результаты.Когда меню отображается, вы можете передать данные объекта в другую функцию, которая затем может отображать элементы на основе элементов.

Надеюсь, что это поможет.