Question

我有一个JQuery CatComplete的有效示例，但是我很难使该示例与AJAX变量一起使用。无法找到带有$ ajax请求的CatComplete示例，而大量的“自动完成”示例。

下面是该示例使用的数据，该数据有效，但是我想将数据设置为AJAX请求的结果。

 var data = [
                { "label": "Test1, "category": "Artist" },
                { "label": "Test2", "category": "Artist" },
                { "label": "Test3", "category": "Musician" }
            ];

所需数据集：

   var data = $.ajax({
                    url: "/People/AutoComplete",
                    type: 'POST',
                    dataType: 'json',
                    data: { Prefix: $("#search").val() },
                    success: function (data) {
                        data= JSON.stringify(data);
                           alert(data);
                    }

使用第二种方法时，初始页面加载中没有数据-然后该函数似乎再次触发并包含数据，但自动完成功能不起作用。我检查了结果对象是否与显式var data =。

匹配相同的结构。

最终，尝试使用下面的示例，但对数据源使用AJAX请求： https://jqueryui.com/autocomplete/#categories

Answer 1

基本上，您有两个问题。

一个不幸的是变量名和参数名冲突。两者都称为data。

另一种情况是，假设您使用source:data初始化自动完成小部件时，您的data变量尚未初始化。

因此，您需要在返回数据时（而不是之前）将自动完成功能的source设置为由ajax返回的数据。

$.ajax    ({
  url: "/People/AutoComplete",
  type: 'POST',
  dataType: 'json',
  data: {
    Prefix: $("#search").val()
  },
  success: function (jsondata) {
    $( "#selector" ).autocomplete( "option", "source", JSON.stringify(jsondata));
  }

Answer 2

尝试

<script>
$("#search").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/People/AutoComplete",
            type: 'POST',
            dataType: 'json',
            data: { text: request.term },
            success: function (jsondata) {
                response($.map(data, function (people) {
                    return { lable: people.name, value: people.name } // or the property you want so show at auto complete
                }));
            }
        });
    }
});

希望它会为您服务

Answer 3

您能尝试一下吗？

$( "#search" ).catcomplete({
  delay: 500,
  source: function(request, response) {
    $.ajax({
      url: "/People/AutoComplete",
      type: "POST",
      dataType: "json",
      contentType: "application/json",
      data: { Prefix: request.term },
      success: function (data) {
        console.log(data);
        response(data);
      },
      error: function(error){
        console.log(error);
        response([{ "label": "Test0", "category": "BadCoder" }]);
      }
    });
  }
});

请注意，source属性可以是

对象（本地）
字符串（用于GET请求的URL）；例如："/People/AutoComplete?Prefix="+$("#search").val()
function(request, response); request-搜索对象，response-带有源数据的回调。

为CatComplete

3 个答案: