Question

我的情况如下，

需要使用onkeyup功能在动态文本框上添加自动填充功能

我的代码如下，这里我调用了一个函数＆＃34; GetName＆＃34;按钮点击动态文本框中的加载位置

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事件。您可以指定要作为自动填充的source选项的值的url，前提是它返回适合自动填充的响应。请参阅文档中的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
 });
}

如果要手动将请求与数据一起发送并将结果传递到自动完成，则可以将函数指定为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，玩了一会儿，你就能让它运转起来。

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

1 个答案: