在同一页面上使用ajax帖子自动完成小部件 - Jquery

Question

我使用以下代码作为autocomplete：

$(function() {
  $.widget("custom.catcomplete", $.ui.autocomplete, {
    _create: function() {
      this._super();
      this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
    },
    _renderMenu: function(ul, items) {
      var that = this,
        currentCategory = "";
      $.each(items, function(index, item) {
        var li;
        if (item.category != currentCategory) {
          ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
          currentCategory = item.category;
        }
        li = that._renderItemData(ul, item);
        if (item.category) {
          li.attr("aria-label", item.category + " : " + item.label);
        }
      });
    }
  });
  var data = [{
      label: "کاغذی",
      category: "مداد"
    },
    {
      label: "ای125",
      category: "مداد"
    },
    {
      label: "ای123",
      category: "مداد"
    },
    {
      label: "ای127",
      category: "مداد"
    },
    {
      label: "ای129",
      category: "مداد"
    },
    {
      label: "ای124",
      category: "مداد"
    },
    {
      label: "بی222",
      category: "مداد"
    },
    {
      label: "بیک",
      category: "خودکار"
    },
    {
      label: "پنتر",
      category: "خودکار"
    },
    {
      label: "فرانسوی",
      category: "خودکار"
    },
    {
      label: "دبل ای",
      category: "کاغذ"
    },
    {
      label: "ییی",
      category: "کاغذ"
    },
    {
      label: "یسش",
      category: "کاغذ"
    }
  ];

  $("#searchInput").catcomplete({
    delay: 0,
    source: data
  });
});

如何将后AJAX发送到我的网址？

Answer 1

以下是解决方案。您必须在source中添加catcomplete。有关详细信息，请参阅此链接：Click here

$("#searchInput").catcomplete({
                source: function(req,resp){
      // do ajax here
      //....
      //pass the data you get in the success function into resp callback
                resp(answer)
       },
                minLength: 0,
            }).focus(function() {
                $(this).caticomplete("search");
            })