html javascript 自动完成不适用于动态添加的文本框

Question

嗨，当我在 1 个文本框上使用 jquery 自动完成功能时，它可以工作，但是当我动态添加新文本框时，这些新文本框没有相同的自动完成功能

这是我的 javascript 自动完成

<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
<script type="text/javascript" src="dynamicscript.js"></script> 
<script>
    $(document).ready(function(){
        $(".DRUG_NAME").autocomplete("gethint.php", {
            selectFirst: true
        });

    });
</script>

这是我每次动态添加的，html代码

<form method="post">

    <p>
        <input type="button" value="Add Drug" onClick="addRow('dataTable')" />
        <input type="button" value="Remove Drug" onClick="deleteRow('dataTable')" />
    </p>

    <table id="dataTable" class="form" border="1">
        <tbody>
            <tr>
                <p>
                    <td>
                        <input type="checkbox" required="required" name="chk[]" checked="checked" />
                    </td>
                    <td>
                        <label>Drug</label>
                        <input type="text" required="required" name="DRUG_NAME[]" id="DRUG_NAME" class="DRUG_NAME">
                    </td>

                </p>
            </tr>
        </tbody>
    </table>

    <input type="submit" value="Save" />
</form>

这是 javascript 动态添加/删除行我什至在我的添加行之后添加了自动完成功能以尝试让 jquery 自动完成在我添加行后每次被调用但它仍然不起作用

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 5) {  // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    } else {
        alert("Maximum Drug is 5");    
    }

    $("#DRUG_NAME").autocomplete("gethint.php", {
        selectFirst: true
    });
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount < 1) {  // limit the user from removing all the fields
                alert("Nothing to Remove");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

有什么想法吗？？发送

Answer 1

您可能需要实时绑定。

看看这个 post： Bind jQuery UI autocomplete using .live()

Answer 2

问题是您正在创建具有相同 ID DRUG_NAME 的元素，然后您正在应用自动完成按 ID 选择字段。

从第一行的输入字段中删除 id，因为它将被复制：

<input type="text" required="required" name="DRUG_NAME[]" class="DRUG_NAME">

创建新行时使用 class 选择器：

$(".DRUG_NAME").autocomplete("gethint.php", {
// ^^
    selectFirst: true
});

Answer 3

以下代码（来自您的 post）将事件附加到页面上当前具有 class DRUG_NAME 的元素：

$(".DRUG_NAME").autocomplete("gethint.php", {
    selectFirst: true
});

当您动态添加选择器将被更新的元素时，但事件仍然不会附加，请参阅此答案：Event binding on dynamically created elements?

使用那个答案，连同他的答案中链接的@LcKjus (Bind jQuery UI autocomplete using .live())，我相信这对你有用（用这个片段替换上面的代码来测试）：

$(".DRUG_NAME").on("focus", function (event) {
   $(this).autocomplete(options);
});

不过，这可能运行自动完成代码多次（如果用户重新聚焦输入字段），因此请注意这一点。

P.S。正如其他人指出的那样，在同一页面上拥有多个具有相同 ID 的元素是不明智的。

Answer 4

绑定自动完成的代码正在运行准备好文档。添加动态文本框后，您需要再次运行它（可能创建一个 bindAuto() 函数或其他任何东西，然后从两个地方运行它）。

html javascript 自动完成不适用于动态添加的文本框

html javascript autocomplete not working with dynamically added textboxes

javascript

php

jquery

autocomplete

dynamic