动态文本框和自动完成


dynamical textbox and 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);?>

这是我的索引.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>

当我尝试将自动完成代码放入一个文本框或多个文本框而不动态添加时,它运行良好。 任何人都可以帮我解决这个问题吗?

您必须使用 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
    });
}