一个页面上有多个jQuery自动完成组合框实例

我希望在一个html页面上有多个JQuery自动完成组合框。这怎么可能

我发现组合框的id很重要。在下面的示例中，JQuery显示的唯一组合框是第一个。 我不希望重复（太多）JQuery脚本代码（我将此代码放在.js文件中，并在.php文件中生成组合框）

我有这个（这只是在的演示示例中的代码）

选择一个。。。
动作脚本
苹果书
Asp
基本的
C
C++
Clojure
COBOL
冷饮
二郎
Fortran
棒极了
哈斯克尔
JAVA
JavaScript
口齿不清
Perl
PHP
python
红宝石
斯卡拉
计划
选择一个。。。
动作脚本
苹果书
Asp
基本的
C
C++
Clojure
COBOL
冷饮
二郎
Fortran
棒极了
哈斯克尔
JAVA
JavaScript
口齿不清
Perl
PHP
python
红宝石
斯卡拉
计划
（函数（$）{
$.widget（“ui.combobox”{
_创建：函数（）{
var self=这个，
select=this.element.hide（），
selected=select.children（“：selected”），
value=selected.val（）？selected.text（）：“”；
var input=this.input=$（“”）
.insertAfter（选择）
.val（值）
.自动完成({
延迟：0，
最小长度：0，
来源：功能（请求、响应）{
var matcher=newregexp（$.ui.autocomplete.escapeRegex（request.term），“i”）；
响应（select.children（“option”）.map（函数（）{
var text=$（this.text（）；
if（this.value&（！request.term | | matcher.test（text）））
返回{
标签：text.replace(
新正则表达式(
（？！[^&；]+；）（？！）（？！[^&；]+；），“gi”
)“$1”，
值：文本，
选项：这个
};
}) );
},
选择：功能（事件、用户界面）{
ui.item.option.selected=true；
自触发（“选定”，事件{
项目：ui.item.option
});
},
更改：功能（事件、用户界面）{
如果（！ui.item）{
var matcher=new RegExp（“^”+$.ui.autocomplete.escapeRegex（$（this.val（））+“$”，“i”），
有效=错误；
select.children（“选项”）.each（函数（）{
if（$（this）.text（）.match（matcher））{
this.selected=valid=true；
返回false；
}
});
如果（！有效）{
//删除无效值，因为它与任何内容都不匹配
$（此）.val（“”）；
选择.val（“”）；
输入数据（“自动完成”）。术语=”；
返回false；
}
}
}
})
.addClass（“ui小部件ui小部件内容ui左角”）；
输入数据（“自动完成”）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“+item.label+”）
.附录（ul）；
};              
this.button=$（“”）
.attr（“tabIndex”，-1）
.attr（“标题”、“显示所有项目”）
.attr（“角色”、“按钮”）
.attr（“aria禁用”、“错误”）
.insertAfter（输入）
.按钮({
图标：{
主要：“ui-icon-triangle-1-s”
},
文本：false
})
。单击（函数（）{
//如果已经可见，请关闭
如果（input.autocomplete（“小部件”）为（“：可见”））{
输入。自动完成（“关闭”）；
返回；
}
//解决bug（可能与#5265的原因相同）
$（this.blur（）；
//将空字符串作为要搜索的值传递，显示所有结果
input.autocomplete（“搜索”和“）；
input.focus（）；
});
},
销毁：函数（）{
this.input.remove（）；
此.button.remove（）；
this.element.show（）；
$.Widget.prototype.destroy.call（this）；
}
});
})（jQuery）；
$（函数（）{
$（“#组合框”）.combobox（）；
$（“#切换”）。单击（函数（）{
$（“#组合框”）.toggle（）；
});
});

谢谢

---

Jan

假设只需选择目标元素，只需按类或多个ID进行选择，如下所示：

$('.combobox').combobox(); // would need to add this shared class to markup

// OR
$('#combobox, #combobox2').combobox(); // should work with existing markup

我更倾向于使用类，这样您就不必总是在增长时手动添加更多ID

请注意，它们包含的切换按钮只是一个演示，用于显示底层的“真实”组合框。我认为你不需要绑定开关

[在评论中找到小提琴：]

（使用ID）

（4个组合框，使用类）

user1264532

我想做一件事

$('.combobox').combobox(); // would need to add this shared class to markup

// OR
$('#combobox, #combobox2').combobox(); // should work with existing markup

        _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();