javascript - 将结果列表与 JQuery AutoComplete 区分开来

Question

我有这个自动完成 jquery 功能，它在文本框下显示设备列表作为建议。我想识别和区分列表中的所有建议。

$(document).ready(function() {
  $("#txtLocate").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "/Project/Home/Search",
        type: "POST",
        dataType: "json",
        data: {
          Prefix: request.term
        },
        success: function(data) {
          response($.map(data, function(item) {
            return {
              label: item.Device,
              value: item.Type
            };
          }))
        }
      })
    },
    messages: {
      noResults: "",
      results: function(count) {
        return count + (count == 0 ? ' result' : ' results');
      }
    }
  });
})

“item.Type”有两个值:Android 和 IOS。所以我需要在自动完成列表中识别哪个是 Android 哪个是 IOS。我可以在每个结果的左侧使用不同的颜色或图像来区分。我怎样才能做到这一点？谢谢

Answer 1

您可以使用扩展方法 _renderItem( ul, item ) 来控制自动完成小部件中菜单项的呈现。

请参阅 API 文档 here .

引用例子here .

$(function() {
  var devices = [
    "Ex1",
    "Ex2",
    "Ex3"
  ];

  $("#result").autocomplete({
      minLength: 1,
      source: devices
    })
    .autocomplete("instance")._renderItem = function(ul, item) {
      return $("<li>")
        .append("<div>Image for " + item.label + "</div>")
        .append("<div>" + item.label + "</div>")
        .appendTo(ul);
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="result" placeholder="Start typing here">