How to insert autocomplete jquery in innerhtml generated textbox

Question

The autocomplete jquery shows list of all users in the database, when atleast 2 characters are entered in the textbox. The autocomplete is working on a normal input field, but when genereated through innerHTML it is not working.

The autocomplete is working on the following field:-

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

A click on the button will add other fields as well calling the addjobdesc function:-

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

The function:-

     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;
    }

I want the autcomplete to work on the generated j_d_permit_by[] field in the innerHTML.

Really appreciate your help.

Can you write whole code please? for function addjobdesc.. OK — Sachin, May 16 '16 at 09:24
input with id =j_d_permit_by_add is not available at jQuery(document).ready and hence the function is not bind to the input.. — Sachin, May 16 '16 at 09:29
You need to bind the `autocomplete` again on newly created element like call this function `$('#newlyCreatedElementId').autocomplete({` in `addjobdesc()` function.. — Guruprasad J Rao, May 16 '16 at 09:34

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

You have bind the autocomplete in jQuery(document).ready but at that time there is no input exists with id =j_d_permit_by_add and hence the function is not bind to the input. You are generating the input dynamically so you have to bind autocomplete function in following way..

Try this to Bind the autocomplete function:

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

You can refer https://stackoverflow.com/a/25114244/1659563

@Guruprasad is also right, you can bind the autocomplete function after the input is generated dynamically in function addjobdesc()

edited May 23 '17 at 11:44

Community

1
1

answered May 16 '16 at 09:35

Sachin

2,152
1
21
43

Thanks for the explanation, I understand why it is not working. But even after implementing your suggestion the autocomplete is still not working. – Sahib Uz Zaman May 16 '16 at 09:53
I have also tried to bind the autocomplete funciton again after document.getElementById('job_desc').appendChild(div); – Sahib Uz Zaman May 16 '16 at 09:54

How to insert autocomplete jquery in innerhtml generated textbox

1 Answers1