Javascript 具有值的自动完成搜索框的动态数目

在我的设置中，我有两个输入框，书名和书价。书名是“自动完成”。当我试图根据选择设定价格时，我被卡住了。例如，如果我在autocomplete中选择ajax，那么应该在book price中选择“1003”

jQuery代码如下：

$(function() {
  var projects =  [
    {
        "label": "ajax",
        "value": "1003",
        "desc": "foriegn"
    },
    {
        "label": "jquery",
        "value": "1000",
        "desc": "dd"
    },


    {
        "label": "wordpress theme",
        "value": "1000",
        "desc": "h"
    },
    {
        "label": "xml",
        "value": "1000",
        "desc": "j"
    } ];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).val( ui.item.value );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label  + "</a>" )
.appendTo( ul );
};


/*Add Row feature starts here*/


$("#addButton");
var counter = 13;

$("#addButton").click(function () {
 var newTextBoxDiv = $(document.createElement('div'))
  .attr("id", 'TextBoxDiv' + counter);

 var roleInput = $('<input/>',{
  type:'text',
  placeholder:'Role',
  name:'Role'+counter,
  id:'project-description' + counter
 });

 var searchInput = $('<input/>',{
  type:'text',
  placeholder:'search',
  name:'search'+counter,
  id:'project' + counter
 });

 var hidd=$('<input/>',{
  type:'hidden',
  name:'searchhid'+counter,
  id:'project-id' + counter
 });


 newTextBoxDiv.append(roleInput).append(searchInput).append(hidd);
 newTextBoxDiv.appendTo("#TextBoxesGroup");
 $('#project' + counter).autocomplete({
  minLength: 0,
        source: projects,
        focus: function( event, ui ) {
        $( "#project" + counter ).val( ui.item.label );
        return false;
        },
        select: function( event, ui ) {
        $( "#project" + counter ).val( ui.item.label );
        $( "#project-id" + counter).val( ui.item.value );
        $( "#project-description" + counter).val( ui.item.value );
        $( "#project-icon" + counter).attr( "src", "images/" + ui.item.icon );
        return false;
        }
 });

 counter++;
});



/*Add row feature ends here*/


});

$（函数（）{
var项目=[
{
“标签”：“ajax”，
“值”：“1003”，
“描述”：“外国”
},
{
“标签”：“jquery”，
“值”：“1000”，
“描述”：“描述”
},
{
“标签”：“wordpress主题”，
“值”：“1000”，
“描述”：“h”
},
{
“标签”：“xml”，
“值”：“1000”，
“描述”：“j”
} ];
$（“#项目”）.autocomplete({
最小长度：0，
资料来源：项目，
焦点：功能（事件、用户界面）{
$（“#项目”）.val（ui.item.label）；
返回false；
},
选择：功能（事件、用户界面）{
$（“#项目”）.val（ui.item.label）；
$（“#项目id”）.val（ui.item.value）；
$（“#项目说明”）.val（ui.item.value）；
$（“#项目图标”）.attr（“src”、“images/”+ui.item.icon）；
返回false；
}
})
.data（“ui自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.append（“+item.label+”）
.附录（ul）；
};
/*添加行功能从这里开始*/
$（“添加按钮”）；
var计数器=13；
$（“#添加按钮”）。单击（函数（）{
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
变量roleInput=$（''{
类型：'text'，
占位符：'Role'，
名称：'Role'+计数器，
id:“项目描述”+计数器
});
var searchInput=$（''{
类型：'text'，
占位符：'搜索'，
名称：'search'+计数器，
id:“项目”+计数器
});
变量hidd=$（''{
类型：'隐藏'，
名称：'searchhid'+计数器，
id:“项目id”+计数器
});
newTextBoxDiv.append（roleInput）.append（searchInput）.append（hidd）；
newTextBoxDiv.appendTo（“#textboxsgroup”）；
$（“#项目”+计数器）。自动完成({
最小长度：0，
资料来源：项目，
焦点：功能（事件、用户界面）{
$（“#项目”+计数器）.val（ui.item.label）；
返回false；
},
选择：功能（事件、用户界面）{
$（“#项目”+计数器）.val（ui.item.label）；
$（“#项目id”+计数器）.val（ui.item.value）；
$（“#项目说明”+计数器）.val（ui.item.value）；
$（“#项目图标”+计数器）.attr（“src”，“images/”+ui.item.icon）；
返回false；
}
});
计数器++；
});
/*在此处添加行特征结束*/
});

下面是html

<div id="project-label"></div>

<input id="project" />
<input type="hidden" id="project-id" />

<input type="text" disabled="disabled" id="project-description"></p>


 <div id='TextBoxesGroup'>
 <div id="TextBoxDiv1" class="form-inline control-group">

 </div>
</div>
 <input type='button' value='Add' id='addButton' />

---

我不知道为什么自动完成选择不适用于动态添加的输入框。非常感谢您的帮助

您的代码非常有效。当你问问题的时候，最好弄一把小提琴。试着先把它修好，然后别人（或我）就能解决你的问题。