функциональность автозаполнения на динамическом текстовом поле

Question

У меня есть сценарий, как следует,

нужно поставить автозаполнения функциональности динамического текстового поля с OnKeyUp функциональностью

Моим код выглядит следующим образом, здесь я сослался функция «GetName» на ButtonClick, где я loadin динамических текстовых полей

function GetName() { 
    var dataToSend = JSON.stringify({ prefixText: $('#search').val(), Id: $("#SearchType").val() 
}); 

    $.ajax({ 
     type: "POST", 
     data: { jsonData: dataToSend }, 
     url: "GetName", 
     datatype: "json", 
     success: function (result) { 
      $("#ResourceNames").empty(); 
      $("#ResourceNames").append('<table>'); 

      $.each(result, function (i, Name) {     
       $("#ResourceNames").append('<tr><td ><Label>' + Name.Value + '</label></td><td> <input type="text" id="Supervisor" class = "form-control", onkeyup="GetResource(\'' + Name.Text + '\');"/></td></tr>');     

      }); 

     }, 
     error: function (xhr, status) { 
      alert(status); 
     } 
    }) 
    $("#ResourceNames").append('</table>'); 
} 

Здесь OnKeyUp событие текстового поля супервизора звонит ниже функцию getresource с аргументом

function GetResource(i) { 

    debugger; 
    var dataToSend = JSON.stringify({ prefixText: $("#Supervisor").val(), designation: i }); 
    $.ajax({ 
     url: "GetSupervisor", 
     data: { jsonData: dataToSend }, 
     dataType: 'json', 
     type: 'POST', 
     success: function (data) { 
      $("#Supervisor").autocomplete({source:data}); 
      }); 
     }, 
     error: function (error) { 
      alert('error; ' + error.text); 
     } 

    }); 

} 

Я не могу связать данные автозаполнения с динамическим текстовым полем, может ли кто-нибудь помочь мне на том же?

Answer 1

У вас есть несколько вопросов, в вашем коде:

• Прежде всего JQuery не Объединяет строки в DOM, он создает DOMElement. Таким образом, $("#ResourceNames").append('<table>'); добавит весь элемент <table>. Все, что вы добавите к #ResourceNames, будет добавлено после таблицы, а не внутри нее.
• HTML, который вы добавляете, содержит id. Таким образом, может быть несколько элементов с одинаковым id, что является недопустимым, в зависимости от ответа. Вместо этого лучше использовать общее имя класса для этих элементов.
• Вам не нужно вручную обрабатывать событие keyup. Вы можете указать url, который вы хотите использовать как значение опции автозаполнения source, при условии, что он возвращает ответ, подходящий для автозаполнения. см. это example в документах.
• Вместо передачи значения через встроенный обработчик вы можете сохранить это значение как атрибут data-* и получить к нему доступ позже.

Так что ваш код должен быть что-то по:

function GetName() { 

    var dataToSend = JSON.stringify({ prefixText: $('#search').val(), Id: $("#SearchType").val()}); 

    $.ajax({ 
    type: "POST", 
    data: { jsonData: dataToSend }, 
    url: "GetName", 
    datatype: "json", 
    success: function (result) { 
     var htmlString ="<table>"; 

     $.each(result, function (i, Name) {     
      htmlString +="<tr><td ><Label>" + Name.Value + "</label></td><td> <input type='text' class = 'form-control Supervisor' data-name='"+ Name.Text + "'/></td></tr>";     
     }); 
    }, 
    error: function (xhr, status) { 
     alert(status); 
    } 
}) 
$("#ResourceNames").append(htmlString); 
$(".Supervisor")..autocomplete({ 
    source: "GetSupervisor" // where GetSupervisor is your data source 
}); 
} 

Если вы хотите вручную отправлять запросы вместе с данными и передавать результаты в автозаполнение, вы можете указать функцию в качестве значения опции источника , (См. my another answer для получения дополнительной информации). например:

$(".Supervisor").autocomplete({ 
    source: function(request,response){ 
     /*send the request here. 
     request.term contains the current value entered in textfield 
     pass the results you want to display like response(data)*/ 
    } 
}); 

Читать API documentation, играть с ним на некоторое время, и вы будете в состоянии заставить его работать.