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动态添加/删除行我甚至在我的addrow之后添加了自动完成功能，尝试在每次添加行后调用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--;
        }
    }
}

任何想法？ TX

Answer 1

您可能需要实时绑定。

看一下这篇文章： Bind jQuery UI autocomplete using .live()

Answer 2

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

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

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

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

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

Answer 3

以下代码（来自您的帖子）将事件附加到页面上存在当前的类DRUG_NAME的元素：

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

当您动态添加要更新选择器的元素但事件仍然无法附加时，请参阅以下答案：Event binding on dynamically created elements?

使用该答案以及在他的答案（Bind jQuery UI autocomplete using .live()）中链接的@LcKjus，我相信这对您有用（用此片段替换上面的代码进行测试）：

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

这可能会多次运行自动完成代码（如果用户重新调整输入字段），所以请注意这一点。

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

Answer 4

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

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

4 个答案: