jQuery自動完成和複製輸入字段

Question

當前有一個內部訂單創建的表單。

零件號字段通過循環創造了這個

<input name="part[]" type="text" value="" class="pn-autocomplete" /> 

jQuery的自動完成功能是用於顯示說明的名單，但在框中輸入部件號

<script> 
$(function() { 
    $(".pn-autocomplete").autocomplete({ 
     source: "pn-json-2.php", 
     minLength: 2, 
     focus: function(event, ui) { 
      $(this).val(ui.item.pn); 
      return false; 
     }, 
     select: function(event, ui) { 
      $(this).val(ui.item.pn); 
      return false; 
     } 
    }) 
    .autocomplete("instance")._renderItem = function(ul, item) { 
     return $("<li>") 
      .append("<a>" + item.desc + "</a>") 
      .appendTo(ul); 
    }; 
}); 
</script> 

問題： 只有該字段的第一個實例顯示條目。所有其他人都顯示類似的下拉菜單，但沒有文字說明，也不允許選擇零件。

我確定答案很簡單，但我無法弄清楚我做錯了什麼！

Answer 1

您必須首先覆蓋小部件工廠方法。試試這個，

$.widget("ui.autocomplete", $.ui.autocomplete, { 

     options: { 
     renderItem: null, 
     }, 

     _renderItem: function(ul, item) { 
      return $("<li>") 
      .append("<a>" + item.desc + "</a>") 
      .appendTo(ul); 
     }, 

    }); 

然後初始化您自動完成這個樣子，

$(function() { 
    $(".pn-autocomplete").autocomplete({ 
     source: "pn-json-2.php", 
     minLength: 2, 
     focus: function(event, ui) { 
      $(this).val(ui.item.pn); 
      return false; 
     }, 
     select: function(event, ui) { 
      $(this).val(ui.item.pn); 
      return false; 
     } 
    }); 
}); 

這裏有一個JSBin作爲一個例子。