Question

我尝试按类别制作自动填充过滤器，例如

当我手动输入整个ID时，自动完成功能已成功显示结果，但是当我尝试通过类别ID获取ID时，ID无法获得ID

这是我的JavaScript代码

$（function（）{

  $(".keyword").autocomplete({
    source: function(request, response) {
      $.ajax({
          url: "search/autocomplete",
          type: "GET",
          dataType: "json",
          data: {'id':$("#cate").change(function () {
            var end = this.value;
        })
        },
          success: function(data) {
              response($.map(data, function(item) {
                return {
                  label: item.value,
                  value: item.value
              };
              }));
          }
      });
    },
    select:function(event,ui) {
      $(".keyword").val(ui.item.label);
      return false;
    },
    minLength: 2,
    select: function(event, ui) {
      window.location = "/lessons/" + ui.item.value;
  }
  }).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';
  });
});

这是我的html

<div class="dropdown-menu dropdown-menu-right" id="cate">
             <a class="dropdown-item" value="'.$category->id.'" href="javascript:void(0)"  onclick="changeCategory(&apos;'.$category->title.'&apos;)">'. $category->title.'</a>
              <div role="separator" class="dropdown-divider"></div>
              <a class="dropdown-item" href="javascript:void(0)" onclick="changeCategory('Semua Kategori')">Semua Kategori</a>
            </div>
          </div>

有人可以帮助我吗？

Answer 1

您正在尝试将ID设置为添加无法使用的更改处理程序的结果。 $ .ajax调用的数据只能是对象，字符串或数组。您应该做的是分别设置事件处理程序以处理更改，存储数据和手动触发自动完成。试试看：

let autocompleteData = {};

$("#cate").change(function () {
    autocompleteData.id = this.value;
    $(".keyword").autocomplete("search");
};

$(".keyword").autocomplete({
    source: function(request, response) {
    $.ajax({
        url: "search/autocomplete",
        type: "GET",
        dataType: "json",
        data: autocompleteData
    },

这个想法是让您的数据成为一个始终存在的对象。最初将其设置为空对象，因此将没有结果。每当类别ID更改时，它都会将该对象的id属性设置为其值，并触发自动完成事件。每当运行自动完成代码时，它都会使用autocompleteData对象的当前状态，因此它应始终在调用中传递类别ID。

自动完成按类别ID过滤-jQuery

1 个答案: