Question

我想显示自动填充的链接
我的代码是

   $("#search-header").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: "Search",
                        dataType: "json",
                        data: {
                            name: request.term,
                            maxRows: 12
                        },
                        success: function (data) {
                            response($.map(data.atomList, function (item) {
                                console.log(item);
                                return {
                                    label: "<a href=" + item.id + ">" + item.name + "</a>",
                                    value: item.id
                                }
                            }));
                        },
                        error: function (data) {
                            alert(data);
                            console.log(typeof data);
                            console.log(data);
                            alert('error');
                        }
                    });
          },.....

显示输出就像 <a>Text</a> 不是如何解决这个问题的链接

Answer 1

您可以使用renderItem

<script>

jQuery(function($) {

  $("#search-header").autocomplete({
    source: function(request, response) {
      //to simulate a async ajax request
      setTimeout(function() {
        var data = {
          atomList: [{
            id: '1',
            name: 'v-1'
          }]
        }
        response($.map(data.atomList, function(item) {
          return {
            label: item.name,
            value: item.id
          }
        }));
      })
    }
  }).data('uiAutocomplete')._renderItem = function(ul, item) {
    return $("<li>")
      .append("<a href=" + item.id + ">" + item.value + "</a>")
      .appendTo(ul);
  };
});

Answer 2

您想使用自动填充功能'_renderItem，它允许您定义自动填充列表的显示方式。与Arun的回答不同，我的_renderItem位于自动完成声明中，使其更具可读性。

$("#search-header").autocomplete({
  source: function (request, response
    $.ajax({
      url: "Search",
      dataType: "json",
      data: {
        name: request.term,
        maxRows: 12
      },
      success: function (data) {
        response($.map(data.atomList, function (item) {
          console.log(item);
          return {
            label: "<a href=" + item.id + ">" + item.name + "</a>",
            value: item.id
          }
        }));
      },
      error: function (data) {
        alert(data);
        console.log(typeof data);
        console.log(data);
        alert('error');
      },
      _renderItem: function (ul, item) {
        return $("<li></li>")
          .data("value", item)
          .append(item.label)
          .appendTo(ul);
      }
    });
},.....

如何在自动填充中显示链接

2 个答案: