将值添加到 jQuery 自动完成实时“网络服务”

Question

如何执行此链接中使用的相同解决方案Adding values to jQuery autocomplete real time

但使用网络服务而不是数组作为源

这是我的代码：

$("#Agent").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: $("#Agent").data("agentlist-url"),
            data: "prefix=" + request.term,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                response($.map(data, function (item) {
                    return {
                        label: item.ID + ' - ' + item.NAME,
                        value: item.ID,
                        Type: item.TYPE,
                    };
                }));
            },
        });
    },
    select: function (e, i) {
        $("#Agent_Id").val(i.item ? i.item.Id : "");
        $("#Agent_Name").val(i.item.Name);
        $("#Agent_Type").val(i.item.Type);
    },
    change: function (ev, ui) {

    },
});

例如，如果可用的类型是 ["Apples"、"Oranges"、"Bananas"]。用户在使用文本字段时输入“李子”。如果用户愿意，有没有办法将“李子”添加到来源列表中？

Answer 1

使用 AJAX 获取所需的数据，然后将其插入到 jQuery UI 自动完成中

$.get("url for web service").done(function(data) {
    // Assuming data returns as an array, if not - convert it to one.
  $("#auto-complete-input").autocomplete({
    source: data
  });
})

Answer 2

您可以使用 Ajax 来调用您的 Web 服务。看一个例子 link

Answer 3

您需要两个网络服务：

• 接受搜索词并返回包含搜索词的字符串数组（如果没有结果符合搜索词，则返回空数组）。 （例如yourdomain/words/search?term={yoursearchterm}）
• 接受一个字符串以添加到您的可能值列表中，以便可以在下一次搜索中返回该值 （例如yourdomain/words/add）

您可以调用您的网络服务，它会返回如下结果：

$("#auto").autocomplete({
    source: function(request, response) {
       $.ajax({
           url: "yourdomain/words/search",
           data: request.term, 
           type: "GET",  // This will depend on how you set up your web service
           dataType: "json", 
           success: function (data) { 
              response($.map(data.d, function (item) { 
                  return { 
                      label: item.Name + '(' + item.Value + ')', 
                      value: item.Name 
                  } 
              })) 
           } 
       });
    },
});

在您链接到的示例中，the accepted answer 在输入不在自动完成下拉列表中时显示一个按钮（在这种情况下由您的网络服务返回）。您可以更改该按钮的onClick 事件调用的函数来调用您的第二个Web 服务，并传递您的自动完成输入字段的值。你可以修改如下：

$("#add").on("click", function () {
    $(this).hide();
    $.ajax({
       url: "yourdomain/words/add",
       data: $("#auto"), 
       type: "POST",  // This will depend on how you set up your web service
       success: function () { 
          console.log('Word added');
       } 
   });
});