autocomplete by jquery in codeigniter textbox id not working

Question

Я создаю форму в таблице и одну кнопку добавления, одну кнопку удаления и одну кнопку отправки.

Когда я нажимаю кнопку «Добавить», тогда создается одна дополнительная строка, и когда я нажимаю кнопку «Удалить», одна строка удаляется.

Вот мой вид страницы

<div style="overflow: scroll;"> 
<?php 
$attributes = array('class' => 'form-horizontal', 'id' => 'form'); 
echo form_open('digital/add_task', $attributes); 
?> 

<table class="table" id="dataTable"> 
    <thead> 
     <tr> 
      <th>Select</th> 
      <!--<th>Date</th>--> 
      <th>Types of Work</th> 
      <th>Worked With</th> 
      <th>Director</th> 
      <th>No of Hours</th> 
      <th>Task</th> 
      <th>Task Status</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="checkbox" name="chk"/></td> 
      <!-- <td><input type="text" name="date[]" value="" /></td>--> 
      <td><input type="text" name="work[]" value="" id="task" /> 
       <span class="text-danger"><?php echo form_error('work[]'); ?></span> 
      </td> 
      <td><input type="text" name="partner[]" value="" /> 
       <span class="text-danger"><?php echo form_error('partner[]'); ?></span> 
      </td> 
      <td> 
       <select name="director[]"> 
        <option value="hkn">HKN</option> 
        <option value="anita">Anita</option> 
        <option value="ravi">Ravi</option> 
        <option value="ameesha">Ameesha</option> 
       </select> 
       <span class="text-danger"><?php echo form_error('director[]'); ?></span> 
      </td> 
      <td><input type="text" name="time[]" value="" /> 
       <span class="text-danger"><?php echo form_error('time[]'); ?></span> 
      </td> 
      <td><input type="text" name="task[]" value="" /> 
       <span class="text-danger"><?php echo form_error('task[]'); ?></span> 
      </td> 
      <td><input type="text" name="status[]" value="" /> 
       <span class="text-danger"><?php echo form_error('status[]'); ?></span> 
      </td> 
     </tr> 

    </tbody> 
</table> 
<input class="btn btn-primary" type="button" value="Add Row" onclick="addRow('dataTable')" /> 
<input class="btn btn-primary" type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> 
<input class="btn btn-primary" type="submit" name="submit" value="submit"> 
<?php 
echo form_close(); 
?> 

вот моя модель:

public function search_task($qs) { 
    /* comparing data with the text box */ 
    $query = $this->db->query("SELECT work_name FROM task_name WHERE work_name LIKE ('$qs%') ORDER BY work_name LIMIT 5"); 
    /* It checks the row in database table */ 
    if ($query->num_rows > 0) { 
     foreach ($query->result_array() as $row) { 
      $row_set[] = htmlentities(stripslashes($row['work_name'])); 
     } 
     echo json_encode($row_set); 
    } 
} 

вот мой контроллер:

public function task_search() { 

    if (!isset($_GET['term'])) { 
     exit; 
    } 

    $qs = strtolower($this->input->get('term')); 
    $this->digital_hodm_model->search_task($qs); 
} 

вот мой JQuery файл:

<SCRIPT language="javascript"> 
function addRow(tableID) { 

    var table = document.getElementById(tableID); 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

    var colCount = table.rows[1].cells.length; 

    for(var i=0; i<colCount; i++) { 

    var newcell = row.insertCell(i); 

    newcell.innerHTML = table.rows[1].cells[i].innerHTML; 
    //alert(newcell.childNodes); 
    switch(newcell.childNodes[0].type) { 
     case "text": 
      newcell.childNodes[0].value = ""; 
      break; 
     case "checkbox": 
      newcell.childNodes[0].checked = false; 
      break; 
     case "select-one": 
      newcell.childNodes[0].selectedIndex = 0; 
      break; 

    } 
    } 
} 

function deleteRow(tableID) { 
    try { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 

    for(var i=0; i<rowCount; i++) { 
    var row = table.rows[i]; 
    var chkbox = row.cells[0].childNodes[0]; 
    if(null != chkbox && true == chkbox.checked) { 
     if(rowCount <= 2) { 
     alert("Cannot delete all the rows."); 
     break; 
     } 
     table.deleteRow(i); 
     rowCount--; 
     i--; 
    } 


    } 
    }catch(e) { 
    alert(e); 
    } 
} 

</SCRIPT> 

<!-- This javascript is used for autocomplete search through database--> 

<script type="text/javascript"> 

$(function(){ 

     $("#task").autocomplete({ 
      source: "<?php echo base_url();?>digital/task_search" // path to the task_search method 
     }); 
      }); 


</script> 

Моя первая по умолчанию строка таблицы выбрана автозаполнением текста из базы данных при вводе чего-либо в виде текстового поля работы, но когда я добавляю одну дополнительную строку, нажмите кнопку «Добавить», а затем в типах поля работы, когда я набираю что-то, затем автоматически полный текст не выбран.

Пожалуйста, помогите мне найти решение

Answer 1

Вы вызываете функцию автозаполнения на $ («#») задачи. Таким образом, первый элемент с этим идентификатором получает функцию автозаполнения. остальные игнорируются. Так как вы добавляете класс к элементам и может вызвать автозаполнения по классу, как:

$(".someclass").autocomplete({ 
      source: "<?php echo base_url();?>digital/task_search" // path to the task_search method 
     }); 
      }); 

Или нужно добавить идентификатор в новую ячейку, порожденного JQuery. Используйте этот

jQuery(this).attr("id","newId"); 

Answer 2

Вы должны изменить «ID» атрибут «класс» атрибут и использовать следующий вызвать автозаполнение: Ниже приведены все параметры, используемых

$('.anyClass').autocomplete({ 
     source:function(keyword, response) 
     { 
      $.ajax({ 
       url:"", 
       type:"POST", 
       data:keyword, 
       dataType:"json", 
       beforeSend: function(){ 
       }, 
       success:function(data) 
       { 
       }, 
      }); 
     }, 
     minLength: 2 
    }); 

Answer 3

Я получил решение.

В моем файле Jquery я назвал автозаполнения в неправильном направлении правильный путь автозавершение здесь

<script type="text/javascript"> 
    $(function(){ 
    $(document).on("keydown.autocomplete",".task",function(e){ 
     $(this).autocomplete({ 
     source : '<?php echo base_url();?>digital/task_search' 
     }); 
    }); 
    }); 
</script> 

Answer 4

Как уже обсуждалось, пожалуйста, используйте решение ниже: -

<script type="text/javascript"> 
    $(function(){ 
    $(document).on("keydown.autocomplete",".task",function(e){ 
    $(this).autocomplete({ 
    source : '<?php echo base_url();?>digital/task_search' 
    }); 
    }); 
    }); 
</script> 

Пожалуйста, помните, что мы должны используйте функцию jquery .on() для динамических элементов, потому что dom уже загружен.