Question

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

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

这是我的代码：

$("#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) {

    },
});

例如，如果可用的类型是[“苹果”，“橘子”，“香蕉”]。用户在使用文本字段时键入“plums”。如果用户需要，有没有办法将“李子”添加到源列表中？

Answer 1

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

for (Reservation reservation : result.getReservations()) {
    for (Instance instance : reservation.getInstances()) {
        System.out.println("Instance id:"
                + instance.getInstanceId());
    }
}

Answer 2

您可以使用Ajax来调用您的Web服务。查看有关的示例 link

Answer 3

您需要两个网络服务：

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

您可以调用您的Web服务，返回如下结果：

$("#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在输入不在自动完成下拉列表中时显示一个按钮（在这种情况下由您的Web服务返回）。您可以更改该按钮的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');
       } 
   });
});

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

3 个答案: