首页 > 解决方案 > jquery自动完成不显示结果

问题描述

我尝试通过 id 类别使用 jquery 过滤器进行自动完成,当我键入结果未显示时,如下图所示:

结果自动完成

当我单击选项卡网络时,我得到了如下图所示的数据: json数据

这是我的代码 javascript:

<script type="text/javascript">
$(function() {
  $(".keyword").autocomplete({
    source: function(request, response) {
      $.ajax({
          url: "search/autocomplete",
          type: "GET",
          dataType: "json",
          data: {'id':1},
          success: function(data) {
              response($.map(data, function(item) {
                return {
                  label: item.name,
                  value: item.id
              };
              }));
          }
      });
    },
    select:function(event,ui) {
      $(".keyword").val(ui.item.label);
      return false;
    },
    minLength: 2,
  }).bind('focus', function () {
    $('.ui-autocomplete').css('z-index','9999').css('overflow-y','scroll').css('max-height','300px');
    // $('.ui-autocomplete').css('background','#09121a').css('color','#fff');
    // $('.ui-menu .ui-menu-item-wrapper').css('padding','11px 1em 3px 1.4em !important');
    // $(this).autocomplete("search");
    // var btncategory = $('.btn-category').width();
    // var left = '-'+btncategory+'px';
  });
});
</script>

如果我输入“a” - 我什么都看不到,但是当我删除“a”时 - 我看到所有三个。所以看起来 jQuery 不知道它应该在 object.name 中查找一个值。

标签: javascriptjquery

解决方案


正如 Tan Duong 所说,您的响应仅包含名为 的属性value。它无法找到nameand id,因此您的结果显示空白数据。

将您的成功功能更改为:

success: function(data) {
          response($.map(data, function(item) {
            return {
              label: item.value,
              value: item.value
          };
          }));
      }

推荐阅读