如何向自动填充添加其他菜单

Question

I'm setting up an autocomplete functionality and want to add an additional menu (not sure if menu is the right term). Similar to here:

Example 1 - Nike Example 2 - Kohls

Both examples have an additional menu that lists Product Suggestions.

I already have autocomplete functionality and I'm able to add images.

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

Using Autocomplete Custom Data and Display as an example, consider the following.

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

The trick here is to make use of _renderMenu as this will have an Object containing all potential results. When the Menu is rendered, you can pass the Object data to another function that can then show items based on the items.

Hope that helps.

</div>