jquery - codeigniter 文本框 id 中的 jquery 自动完成功能不起作用

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

这是我的 Controller :

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

您正在 $("#task") 上调用自动完成功能。因此具有该 id 的第一个元素获得自动完成功能。其余的被忽略。因此，要么向元素添加一个类，然后可以调用类上的自动完成功能:

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

或者您需要向 jquery 生成的新单元格添加一个 id。用这个

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