多個自動填充搜索字段

我在文本輸入上使用jQuery UI自動填充小部件。此文本輸入用於將產品添加到數據庫。多個自動填充搜索字段

這裏是我的代碼：

HTML：

<div class="form-group"> 
    <input type="text" class="form-control" placeholder="Termék kiválasztásához kezdjen el gépelni..." id="search"> 
    <div id="autocomplete"></div> 
</div>

JS：

$('#search').on('keypress', function() { 
    $(this).autocomplete({ 
     appendTo: "#autocomplete", 
     autoFocus: true, 
     minLength: 0, 
     source: "array - ommited for clarity" 
    }); 
});

我想添加一個按鈕，這又增加了輸入字段，使用戶可以添加其他產品到數據庫。

我的問題是，如果我複製我使用的HTML，我會有多個具有相同ID的元素。當然，合乎邏輯的做法是用類替換ID，但是如果我正確的話，jQuery的類選擇器會選擇第一個匹配元素，所以keypress事件會觸發原始輸入。

如何在不重複我的JavaScript代碼的情況下添加其他文本輸入？

來源

2014-11-24 PeterInvincible

首先，你爲什麼初始化裏面'keypress'處理程序自動完成..？！你確定你想每次按下鍵重新初始化它..？ *「如果我是正確的，jQuery的類選擇器會選擇第一個匹配的元素，所以按鍵事件會觸發原始輸入。」* - 你錯了。順便說一句，你可以自己測試和確認它...試試吧，讓我們知道如果你實施它... – 2014-11-24 15:53:49

您可以使用類而不是Id選擇器。

請檢查此鏈接：how-can-i-add-jquery-ui-autocomplete-to-a-dynamically-created-element

而這一切jsfiddle

<form id="myForm" name="myForm" method="post"> 
<input id="addButton" name="addButton" type="button" value="Add an input" />

$(function() { 
var options = { 
    source: [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
     ], 
    minLength: 2 
}; 

$("input.searchInput").live("keydown.autocomplete", function() { 
    $(this).autocomplete(options); 
}); 

var addInput = function() { 
    var inputHTML = " <input name='search' value='' class='searchInput' maxlength='20' />"; 
    $(inputHTML).appendTo("form#myForm"); 
    $("input.searchInput:last").focus(); 
}; 

if (!$("form#myForm").find("input.searchInput").length) { 
    addInput(); 
} 

$("input#addButton").click(addInput); 
});

來源

2014-11-24 12:48:36

多個自動填充搜索字段

回答

相關問題