动态文本框上的自动完成功能

Question

我有一个场景如下，

需要在带有 onkeyup 功能的动态文本框上添加自动完成功能

我的代码如下，这里我在 buttonclick 上调用了一个函数“GetName”，我加载了动态文本框

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，用它玩一会儿，你就可以让它工作了。