Добавление значений в 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) { 

    }, 
}); 

Например, если доступны доступные типы [«Яблоки», «Апельсины», «Бананы»]. Пользователь вводит «сливы» при использовании текстового поля. Есть ли способ добавить «сливы» в список источников, если пользователь так желает?

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 для вызова веб-службы. Смотрите пример на 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 этой кнопки, для вызова второго веб-сервиса, передающего значение поля ввода автозаполнения. Вы можете изменить его следующим образом:

$("#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'); 
     } 
    }); 
});