如何在innerhtml生成的文本框中插入自动完成jquery

Question

当在文本框中输入至少 2 个字符时，自动完成 jquery 会显示数据库中所有用户的列表。自动完成功能在正常的输入字段上工作，但是当通过 innerHTML 生成时它不起作用。

自动完成功能正在处理以下字段：-

<input type="text" id="j_d_permit_by[]" name="j_d_permit_by[]" >

单击按钮将添加其他字段以及调用 addjobdesc 函数：-

<img src="images/add.png" width="12" height="12"> <a href="javascript: addjobdesc();">Add New Job Description</a><br />

功能：-

     function addjobdesc() {
     var div = document.createElement('div');

        div.className = 'row';

        div.innerHTML = '<table id="tblObs" name="tblObs" width="70%"  bgcolor="#CCCCCC"><tr bordercolor="#FFFFFF">
    <td colspan="5"><b>Job Description (Work Ppermit/ Activity)</b></td></tr>

<tr bgcolor="#33CC00">

    <td ><center> <b>Exact Location</b> </center></td> <td><b><center>Permit Initiated By<br />/<br />Activity Supervised by</center></b></td>

    <td><b><center>Permit Accepted By<br />/<br />aActivity Executor</center></b></td><td><b><center>For What Permit Issued</center></b></td>

    <td><b><center>Observation</center></b></td></tr>
    <tr><td><center><select name="s_area[]" id="s_area" onchange="addSubArea()">
    <option value="0">Chose Sub Area</option></select></center></td>

    <td><input type="text" id="j_d_permit_by_add" name="j_d_permit_by[]"></td>

    <td><center><select id="j_d_accept_by[]" name="j_d_accept_by[]" ><option value="0">Select User</option><?php  $users = getUserS(); 
    while($usersss = mysql_fetch_array($users)){ ?>
    <option value="<?php echo $usersss[0];?>"><?php echo $usersss[4]." ".$usersss[5];  ?></option>
    <?php } ?>
    </select></td>

    <td><center><textarea name="permit_ref[]" cols="30"> </textarea></center></td>

<td><center><textarea name="obs_permit[]" id="obs_permit" cols="30"></textarea></center></td></tr></table><input class="submit" type="button" value="Remove" onclick="removeR0ow__(this)">';

    <!--<input type="hidden" name="j_d_Location[]" id="j_d_Location" value="" /><input type="text" name="area_Location[]" id="area_Location" value="" readonly="readonly" />-->

    document.getElementById('job_desc').appendChild(div);

 jQuery(document).ready(function(){
            $('#j_d_permit_by_add').autocomplete({
                    source: 'suggest_name.php',
                    minLength:2
                    });
            });

    var Max_Length = parseInt(document.getElementsByName('s_area[]').length)-1;
    document.getElementsByName('s_area[]').item(Max_Length).innerHTML = '';
    document.getElementsByName('s_area[]').item(Max_Length).innerHTML = document.getElementById('sarea_div').innerHTML;
    }

我希望自动完成功能在 innerHTML 中生成的 j_d_permit_by[] 字段上工作。

非常感谢您的帮助。

Answer 1

您已在jQuery(document).ready 中绑定了autocomplete，但当时id =j_d_permit_by_add 不存在输入，因此该函数未绑定到输入。您正在动态生成输入，因此您必须按以下方式绑定 autocomplete 函数..

试试这个来绑定自动补全功能：

jQuery(document).ready(function(){
    $(document).on('#j_d_permit_by_add', selector, function() {
        $(this).autocomplete({
            source: 'suggest_name.php',
            minLength:2
        });
    });
});

您可以参考https://stackoverflow.com/a/25114244/1659563

@Guruprasad 也对，可以在function addjobdesc()中动态生成输入后绑定autocomplete函数