Javascript 添加动态html行后如何选择文本输入_Javascript_Jquery

Javascript 添加动态html行后如何选择文本输入

javascript jquery

Javascript 添加动态html行后如何选择文本输入,javascript,jquery,Javascript,Jquery,我正在从事codeiginter项目，我有一个购买表单，用户可以使用autocomplete在输入文本中搜索备件项目，这是可行的，但在我按add按钮到ann新行搜索另一个项目后。。。新的一排我不能像第一排那样在里面搜索我希望用户在搜索后选择该项目，然后添加新行以搜索另一个项目以添加它搜索代码 <script type="text/javascript"> $(document).ready(function(){ // Initialize $("#itemcode")

我正在从事codeiginter项目，我有一个购买表单，用户可以使用autocomplete在输入文本中搜索备件项目，这是可行的，但在我按add按钮到ann新行搜索另一个项目后。。。新的一排我不能像第一排那样在里面搜索

我希望用户在搜索后选择该项目，然后添加新行以搜索另一个项目以添加它

搜索代码

<script type="text/javascript">
$(document).ready(function(){

 // Initialize 

 $("#itemcode").autocomplete({
    source: function( request, response ) {
      // Fetch data
      $.ajax({
        url: 'spareList',
        type: 'post',
        dataType: "json",
        data: {
          search: request.term
        },
        success: function( data ) {
              response( data );


        //=========================
        }
      });
    },
    select: function (event, ui) {
      // Set selection

      $('#itemcode').val(ui.item.label); // display the selected text
      $('#itemname').val(ui.item.value); // save selected id to input
      return false;


    }
  });

});


$（文档）.ready（函数（）{
//初始化
$（“#项目代码”）.autocomplete({
来源：功能（请求、响应）{
//获取数据
$.ajax({
url:“spareList”，
键入：“post”，
数据类型：“json”，
数据：{
搜索：request.term
},
成功：功能（数据）{
答复（数据）；
//=========================
}
});
},
选择：功能（事件、用户界面）{
//集合选择
$（'#itemcode'）.val（ui.item.label）；//显示所选文本
$（'#itemname'）.val（ui.item.value）；//将所选id保存到输入
返回false；
}
});
});

添加新行的代码


$（文档）.ready（函数（）{
var计数=1；
$（'#添加'）。单击（函数（）{
计数=计数+1；
var html_code=“”；
html_代码+=“”；
html_代码+=“”；
html_代码+=“”；
html_代码+=“”；
html_代码+=“-”；
html_代码+=“”；
$（“#crud_表”）.append（html_代码）；
});
});
$（文档）。在（'单击'，'删除'，函数（）上）{
var delete_row=$（this）.data（“row”）；
$（“#”+删除行）。删除（）；
});

您可能需要在一个文档中准备好函数，并确保使用

类

而不是

ID

。以下是您可以尝试的代码：

$（文档）.ready（函数（）{
//初始化
某些部分（）；
函数someParts（）{
$（“.form控件”）.autocomplete({
来源：功能（请求、响应）{
//获取数据
$.ajax({
url:“spareList”，
键入：“post”，
数据类型：“json”，
数据：{
搜索：request.term
},
成功：功能（数据）{
答复（数据）；
//=========================
}
});
},
选择：功能（事件、用户界面）{
//集合选择
$（'#itemcode'）.val（ui.item.label）；//显示所选文本
$（'#itemname'）.val（ui.item.value）；//将所选id保存到输入
返回false；
}
});
}
var计数=1；
$（'#添加'）。单击（函数（）{
计数=计数+1；
var html_code=“”；
html_代码+=“”；
html_代码+=“”；
html_代码+=“”；
html_代码+=“”；
html_代码+=“-”；
html_代码+=“”；
$（“#crud_表”）.append（html_代码）；
某些部分（）；
});
});
$（文档）。在（'单击'，'删除'，函数（）上）{
var delete_row=$（this）.data（“row”）；
$（“#”+删除行）。删除（）；
});

这可以在没有唯一ID和HTML页面的情况下实现

按以下步骤进行：

将初始表行包装在
中
从HTML中删除
```
id=“itemcode”
```
和
```
id=“itemname”
```
将
```
$（…）.autoComplete（…）
```
代码包装到一个函数中，比如说
```
setAutoComplete（）
```
，这样就可以重用它
从原始表行创建原型行
在原始表格行上设置
```
setAutoComplete（）
```
要添加新行，请将原型行的克隆附加到tbody，并对其调用
```
setAutoComplete（）
```
在
```
setAutoComplete（）
```
中，将DOM从行遍历到要设置
```
autocomplete
```
插件的输入元素
在setAutoComplete中，
```
选择
```
处理程序，遍历DOM以找到相应的
```
itemname
```
元素

$（文档）.ready（函数（）{
// ******************
//效用函数
// ******************
函数集自动完成（$row）{
$row.find（'.item_code'）。next（'input'）//遍历DOM以查找行的itemcode字段
.自动完成({
“源”：函数（请求、响应）{
$.ajax({
“url”：“spareList”，
'type'：'post'，
“数据类型”：“json”，
'data'：{'search'：request.term}，
“成功”：函数（数据）{
答复（数据）；
/* ========================= */
}
});
},
“选择”：函数（事件、用户界面）{
var$target=$（event.target）；//设置了自动完成的.item_代码字段（需要测试）。
$target.val（ui.item.label）；//显示所选文本。
$target.closest（'tr'）.find（'.item_name'）.next（'input'）.val（ui.item.value）；//通过遍历DOM查找相应的itemname字段。
返回false；
}
});
return$row；//用于在下面建立$rowProto
}
函数appendNewRow（）{
setAutoComplete（$rowProto.clone（）.appendTo（'tbody'，$table））；//克隆$rowProto，appendTo table并初始化autocomplete。
//回音为迪卡德。
}
// **********************
//静态jQuery对象
// **********************
变量$table=$（'crud#U table'）；
var$rowProto=setAutoComplete（$（'tbody tr'，$table）.eq（0））.clone（）；//找到初始行，在其上初始化autocomplete并创建原型。
// **************************************
//将删除按钮追加到第p行
$(document).ready(function() {
    // Initialize 
    someParts();

    function someParts() {
        $(".form-control").autocomplete({
            source: function(request, response) {
                // Fetch data
                $.ajax({
                    url: 'spareList',
                    type: 'post',
                    dataType: "json",
                    data: {
                        search: request.term
                    },
                    success: function(data) {
                        response(data);
                        //=========================
                    }
                });
            },
            select: function(event, ui) {
                // Set selection

                $('#itemcode').val(ui.item.label); // display the selected text
                $('#itemname').val(ui.item.value); // save selected id to input
                return false;


            }
        });
    }
    var count = 1;
    $('#add').click(function() {
        count = count + 1;
        var html_code = "<tr id='row" + count + "'>";
        html_code += "<td contenteditable='false' class='item_code' ><input type='text' class='form-control' placeholder='item code' id='itemcode' /></td>";
        html_code += "<td contenteditable='false' class='item_name'  ><input type='text' class='form-control' placeholder='item name' id='itemname'/></td>";
        html_code += "<td contenteditable='false' class='item_quantity'><input type='text' class='form-control' placeholder='quantity' /></td>";
        html_code += "<td contenteditable='false' class='item_price' ><input type='text' class='form-control' placeholder='price' /></td>";
        html_code += "<td><button type='button' name='remove' data-row='row" + count + "' class='btn btn-danger btn-xs remove'>-</button></td>";
        html_code += "</tr>";
        $('#crud_table').append(html_code);
        someParts();
    });
});

$(document).on('click', '.remove', function() {
    var delete_row = $(this).data("row");
    $('#' + delete_row).remove();
});

$(document).ready(function() {
    // ******************
    // utility functions
    // ******************
    function setAutoComplete($row) {
        $row.find('.item_code').next('input') // traverse the DOM to find the row's itemcode field
        .autocomplete({
            'source': function(request, response) {
                $.ajax({
                    'url': 'spareList',
                    'type': 'post',
                    'dataType': 'json',
                    'data': { 'search': request.term },
                    'success': function(data) {
                        response(data);
                        /* ========================= */
                    }
                });
            },
            'select': function (event, ui) {
                var $target = $(event.target); // the .item_code field on which autocomplete was set (needs to be tested).
                $target.val(ui.item.label); // display the selected text.
                $target.closest('tr').find('.item_name').next('input').val(ui.item.value); // find corresponding itemname field by traversing DOM.
                return false;
            }
        });
        return $row; // useful for establishing $rowProto below
    }
    function appendNewRow() {
        setAutoComplete($rowProto.clone().appendTo('tbody', $table)); // clone $rowProto, append to table and initialize autocomplete.
                                                                      // return vaue is dicarded.
    }

    // **********************
    // static jQuery objects
    // **********************
    var $table = $('#crud_table');
    var $rowProto = setAutoComplete($('tbody tr', $table).eq(0)).clone(); // find the initial row, initialize autocomplete on it and create prototype.

    // **************************************
    // append remove button to row prototype
    // **************************************
    $rowProto.find('td:eq(4)').append("<button type='button' class='btn btn-danger btn-xs remove'>-</button>");

    // **********************
    // attach event handlers
    // **********************
    $('#add').on('click', appendNewRow); // with utility functions and reused jQuery objects in place, the "#add" event handler is really simple.
    $(document).on('click', '.remove', function() {
        $(this).closest('tr').remove(); // No need to select by ID. Instead, traverse the DOM from the clicked element to its table row.
    });
});