2013-11-14 41 views
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' /> 

請告訴我,我在這段代碼丟失。

回答

0

我認爲這是一個JavaScript錯誤。您的select事件來自自動完成查找$("#project-icon" + counter),但我沒有看到該元素被渲染到任何地方。此外,當試圖設置該元素的src屬性時,您引用ui.item.icon,但您的值數組不包含該屬性。

+0

那是不停止自動完成。我在刪除-icon後在我的設置中檢查了它。 – user2991484

+0

哦,我現在也看到了這個問題。在創建一個新的文本框行後,可以增加'counter'的值。當你點擊'select'事件時,這是個問題,因爲它使用'counter'的當前值來查找頁面上的元素。如果你使用'(counter - 1)'查找你的ID,它就可以工作,但只適用於最近添加的行。任何以前的行都不行。 –

+0

我應該在哪裏更改代碼? – user2991484