在一个页面上的多个jQuery自动完成组合框的实例
问题描述：
我想在一个html页面上有多个JQuery自动完成组合框的。 （如何）这是possibe？在一个页面上的多个jQuery自动完成组合框的实例
我发现组合框的id事项。在下面的例子中，用JQuery显示的唯一组合框是第一个。 我不喜欢复制（太多）JQuery脚本代码（我把这段代码放在.js文件中，并在.php文件中生成组合框）
我有这个（这只是示例代码http://jqueryui.com/demos/autocomplete/#combobox）
<select id="combobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
<select id="combobox2">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
(function($) {
$.widget("ui.combobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children(":selected"),
value = selected.val() ? selected.text() : "";
var input = this.input = $("<input>")
.insertAfter(select)
.val(value)
.autocomplete({
delay: 0,
minLength: 0,
source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(select.children("option").map(function() {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>"),
value: text,
option: this
};
}));
},
select: function(event, ui) {
ui.item.option.selected = true;
self._trigger("selected", event, {
item: ui.item.option
});
},
change: function(event, ui) {
if (!ui.item) {
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
valid = false;
select.children("option").each(function() {
if ($(this).text().match(matcher)) {
this.selected = valid = true;
return false;
}
});
if (!valid) {
// remove invalid value, as it didn't match anything
$(this).val("");
select.val("");
input.data("autocomplete").term = "";
return false;
}
}
}
})
.addClass("ui-widget ui-widget-content ui-corner-left");
input.data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
this.button = $("<button type='button' class='ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right ui-button-icon ui-state-hover'><span class='ui-button-icon-primary ui-icon ui-icon-triangle-1-s'></span><span class='ui-button-text'> </span></button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.attr("role", "button")
.attr("aria-disabled", "false")
.insertAfter(input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.click(function() {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// work around a bug (likely same cause as #5265)
$(this).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
},
destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
$(function() {
$("#combobox").combobox();
$("#toggle").click(function() {
$("#combobox").toggle();
});
});
谢谢！
月
答
假设所有你需要的是选择目标元素，你只需要通过类或多个ID这样的选择：
$('.combobox').combobox(); // would need to add this shared class to markup
// OR
$('#combobox, #combobox2').combobox(); // should work with existing markup
我更使用类，以便您随着您的成长，并不总是必须手动添加更多的ID。
请注意，它们包含的切换按钮就像演示显示底层“真实”组合框一样。我不认为你需要绑定切换。
[小提琴在注释中找到：]
http://jsfiddle.net/6wMz9/（使用ID）
http://jsfiddle.net/6wMz9/1/（4个组合框，使用类）
答
user1264532
我想要做相同的，我有多个组合框实例，但ID是问题所在，所以我所做的就是将相同的ID添加到由autocomplete.combobox示例创建的跨度中。唯一的变化是在构造函数中：
_create: function() {
console.log(this);
this.wrapper = $("<span>")
.addClass("custom-combobox")
.insertAfter(this.element)
.attr('id', this.element[0].id+'_combobox');
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
而只是把它这样
$("#combobox1").combobox();
$("#combobox2").combobox();
我这样做是因为我需要赶上变化事件上的每个组合框，并在其他答案我无法实现这一点。希望这可以帮助。
这里是一个jsFiddle example干杯！
嗨Greg 感谢您的快速回复！ 我试过两种选择，但在这两种情况下，只有第一个组合框变成了一个jQuery小部件... 我已经删除了切换按钮，因为我确实不需要它... – user1264532 2012-03-13 09:05:23
适用于我：http：// jsfiddle.net/6wMz9/（注意风格丢失，按钮为空......这是因为jQuery UI CSS不存在，但你可以告诉它它工作） – 2012-03-13 14:19:54
使用类而不是ID（注意除了HTML标记是必要的，他们都得到'class =“combobox”'）http://jsfiddle.net/6wMz9/1/ – 2012-03-13 14:25:19