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

时间:2016-05-16 09:21:41

标签: javascript jquery html autocomplete

自动填充jquery显示数据库中所有用户的列表,当在文本框中输入至少2个字符时。自动完成功能正在处理正常的输入字段,但是当通过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;
    }

我希望autcomplete能够处理innerHTML中生成的j_d_permit_by []字段。

非常感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

您已绑定autocomplete jQuery(document).ready,但此时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也是对的,你可以在autocomplete

动态生成输入后绑定function addjobdesc()函数