2014-11-24 116 views
1

我在文本输入上使用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代码的情况下添加其他文本输入?

+0

首先,你为什么初始化里面'keypress'处理程序自动完成..?!你确定你想每次按下键重新初始化它..? *“如果我是正确的,jQuery的类选择器会选择第一个匹配的元素,所以按键事件会触发原始输入。”* - 你错了。顺便说一句,你可以自己测试和确认它...试试吧,让我们知道如果你实施它... – 2014-11-24 15:53:49

回答

1

您可以使用类而不是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); 
});