动态文本框和自动完成

Question

我想在我的动态文本框中进行自动完成。我已经尝试了各种方法，但没有奏效。 这是我的 autocomplete.php 代码：

<?php
$connection = mysqli_connect("localhost","root","","rbmv3") or die("Error " . mysqli_error($connection));

//fetch department names from the department table
$sql = "select country_name from countries";
$result = mysqli_query($connection, $sql) or die("Error " . mysqli_error($connection));

$dname_list = array();
while($row = mysqli_fetch_array($result))
{
    $dname_list[] = $row['country_name'];
}
echo json_encode($dname_list);?>

这是我的 index.php 代码：

<label>Department Name</label></br>
<button type="button"  onclick="coba()"> Tes </button> <br>
<div id="add">
<input class="department_name" type="text" size="50" />
</div>

<script type="text/javascript">
$(function() {
var availableTags = <?php include('autocomplete.php'); ?>;
$(".department_name").autocomplete({
    source: availableTags,
    autoFocus:true
});
});
</script>

<script type="text/javascript">
    function coba(){
            document.getElementById("add").innerHTML +=
   " <inputclass='department_name' type='text' size='50' />";
    }
</script>

当我尝试将自动完成代码放入一个文本框或多个文本框而不动态添加时，它运行良好。谁能帮我解决这个问题？

Answer 1

您必须使用 destroy() 删除当前自动完成的绑定，然后再次调用 autoComplete()

function coba(){
    document.getElementById("add").innerHTML +=
    " <inputclass='department_name' type='text' size='50' />";
    $(".department_name").autocomplete( "destroy" );
    $(".department_name").autocomplete({
        source: availableTags,
        autoFocus:true
    });
}