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

＆＃34;项目。形式＆＃34;拥有两个值：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">

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

1 个答案: