4
輸入文本框是通過jquery動態創建的。自動完成效果很好。但是,當我選擇一個項目的價值不能正確渲染,我可以知道我在這裏失蹤的地方?自動完成搜索工作,但未被選中
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"
} ];
$("#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++;
});
});
` 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' />
請告訴我,我在這段代碼丟失。
那是不停止自動完成。我在刪除-icon後在我的設置中檢查了它。 – user2991484
哦,我現在也看到了這個問題。在創建一個新的文本框行後,可以增加'counter'的值。當你點擊'select'事件時,這是個問題,因爲它使用'counter'的當前值來查找頁面上的元素。如果你使用'(counter - 1)'查找你的ID,它就可以工作,但只適用於最近添加的行。任何以前的行都不行。 –
我應該在哪裏更改代碼? – user2991484