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

您正在$（＆＃34; #task＆＃34;）上调用自动完成功能。因此具有该id的第一个元素获得自动完成功能。休息被忽略了。因此，要么为类添加一个类，要么可以在类上调用自动完成：

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

或者您需要为jquery生成的新单元格添加id。使用此

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

Answer 2

您需要更改＆＃34; id＆＃34;属于＆＃34; class＆＃34;属性和使用以下来调用自动完成：以下是使用的所有参数

    $('.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。

codeigniter文本框中的jquery自动完成ID无法正常工作

4 个答案: