jQuery自动完成动态添加的输入行

问题描述

我正在尝试向表中动态添加/删除输入行，并希望每行（现有行和新添加的行）都具有自动完成功能。我使用jQuery实现了这一目标。

在线搜索后，我意识到每次创建一行时都需要触发jQuery调用，解决方案之一是执行“单击”技巧。我花了很多时间，但仍然无法使自动完成部分起作用（这里是jQuery新手），请您看一下下面的代码并指出代码有什么问题：

jsfiddle： http://jsfiddle.net/ke5dsfn7/

此处的HTML：

  <div data-toggle="fieldset" id="my-fieldset">           
     <div class="row" data-toggle="fieldset-entry">                
        <div class="col-lg-8"><input class="stateInput" id="state-0-name" name="state-0-name" placeholder="State,e.g. CA" required type="text" value="CO"></div>                      
        <div class="col-lg-3"><input class="text-right" id="state-0-weight" name="state-0-weight" placeholder="e.g. 20.0" required type="text" value="90.00"></div>
        <div class="col-lg-1"><button class="btn btn-danger" type="button" data-toggle="fieldset-remove-row" id="port-asset-0-remove"> DEL</button></div>                
    </div>               
  
  
    <div class="col-lg-2"><button class='btn btn-sm btn-info' type="button" data-toggle="fieldset-add-row" data-target="#my-fieldset" > ADD</button> </div> 
    <div><input class="btn btn-primary btn-lg" id="submit" name="submit" type="submit" value="Submit"></div>  
  </div>
  

此处的JavaScript：

$(function() {
        var cdata = [
                    { value: "AL",label: "Alabama" },{ value: "AK",label: "Alaska" },{ value: "AZ",label: "Arizona" },{ value: "AR",label: "Arkansas" },{ value: "CA",label: "California" },{ value: "CO",label: "Colorado" },{ value: "CT",label: "Connecticut" },{ value: "DE",label: "Delaware" },{ value: "FL",label: "Florida" },{ value: "GA",label: "Georgia" },{ value: "HI",label: "Hawaii" },{ value: "ID",label: "Idaho" },{ value: "IL",label: "Illinois" },{ value: "IN",label: "Indiana" },];
                
    $("div[data-toggle=fieldset]").each(function() {
        var $this = $(this);
        
        //Add new entry
        $this.find("button[data-toggle=fieldset-add-row]").click(function() {
            var target = $($(this).data("target"))
            console.log(target);
            var oldrow = target.find("[data-toggle=fieldset-entry]:last");
            var row = oldrow.clone(true,true);
            console.log(row.find(":input")[0]);
            var elem_id = row.find(":input")[0].id;
            var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m,'$1')) + 1;
            row.find(":input").each(function() {
                console.log(this);
                var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-','-' + (elem_num) + '-');
                $(this).attr('name',id).attr('id',id).val('').prop('checked',false);
            });

            oldrow.after(row);            
        }); //End add new entry


        //Remove row
        $this.find("button[data-toggle=fieldset-remove-row]").click(function() {
            if($this.find("[data-toggle=fieldset-entry]").length > 1) {
                var thisRow = $(this).closest("[data-toggle=fieldset-entry]");
                thisRow.remove();
            }
        }); //End remove row
        
    });
    
    // autocomplete when typing
    $('body').on('click','.stateInput',function() {                
            $(this).autocomplete({
                source: cdata,minLength: 0,delay: 0,select : function(event,ui) {
                    $(event.target).val(ui.item.value);
                 }
           });
        
          $(this).autocomplete("search");

        }); 

});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）