Select jQuery组合框/选择自动完成？

是否存在用于替换选择/组合框的jQuery插件

我试过SexyCombo，它很接近我想要的，但如果你是从中间开始写，它并不完整，只是从一开始

我有2个级别的类别（20个顶级类别，子类别总共120个类别），所以当用户提交条目时，他必须尽快找到所需的类别

所以。。。2级+自动完成填充文本，即使您书写中间字母

---

或任何其他解决方案？

jQuery 1.8.1在“自动完成”下有一个这样的例子。它很容易实现。

看看下面的jQueryUI自动完成示例，因为它保留了一个select，我想这就是您要寻找的。希望这有帮助

---

我知道前面已经说过了，但这正是您需要的。您应该查看文档，因为自动完成是非常可定制的。如果您熟悉javascript，那么您应该能够解决这个问题。如果不是的话，我可以给你一些建议，就像我以前做过一次一样，但是要注意我自己也不太精通javascript，所以请耐心听我说

我认为你应该做的第一件事就是在你的页面上创建一个简单的自动完成文本字段，然后你可以从那里定制它

autocomplete小部件接受JSON数据作为“源：”选项。因此，你应该设置你的应用程序，以JSON格式生成20个顶级类别和子类别

接下来要知道的是，当用户在textfield中键入时，autocomplete小部件将发送名为“term”的参数中键入的值

假设您首先设置站点，从如下URL交付JSON数据：

/categories.json

/categories.json?term=first-cata

然后，您的自动完成源：选项将是“source:/categories.json”

当用户在文本字段中键入“first cata…”时，自动完成小部件将开始发送“term”参数中的值，如下所示：

/categories.json

/categories.json?term=first-cata

这将把JSON数据返回到小部件，该小部件通过与“first cata”匹配的任何内容进行过滤，并显示为自动完成建议

我不确定您正在用什么编程，但您可以指定“term”参数如何查找匹配项。因此，您可以自定义此项，以便在您想要的单词中找到一个匹配项。例如，如果用户键入“或”，您可以在“sp或ts”上进行编码匹配

最后，您做了一个评论，希望能够选择一个类别名称，但让autocomplete小部件提交类别ID而不是名称

这可以通过一个隐藏字段轻松完成。这是jQuery自动完成文档中显示的内容

当用户选择一个类别时，JavaScript应该用ID更新一个隐藏字段

我知道这个答案不是很详细，但这主要是因为我不确定你在用什么编程，但上面的内容应该为你指明了正确的方向。要知道的是，如果你愿意花时间学习，你可以用这个小部件进行任何定制

这些是概括性的笔划，但是你可以从我在Rails应用程序中实现类似于你想要的东西时所做的一些注释中找到答案

希望这有帮助

[编辑]我注意到了这件可爱的衣服，它看起来是我的一个不错的选择

或者，如果您只想使用jQuery autocomplete，我已经扩展了，以支持默认值，并删除了工具提示，以提供我认为更符合预期的行为

（函数（$）{
$.widget（“ui.combobox”{
_创建：函数（）{
var输入，
那=这个，
wasOpen=false，
select=this.element.hide（），
selected=select.children（“：selected”），
defaultValue=selected.text（）| |“”，
包装器=此。包装器=$（“”）
.addClass（“ui组合框”）
.insertAfter（选择）；
函数removeIfInvalid（元素）{
var值=$（元素）.val（），
matcher=newregexp（“^”+$.ui.autocomplete.escapeRegex（value）+“$”，“i”），
有效=错误；
选择.children（“选项”）。每个（函数（）{
if（$（this）.text（）.match（matcher））{
this.selected=valid=true；
返回false；
}
});
如果（！有效）{
//删除无效值，因为它与任何内容都不匹配
$（元素）.val（默认值）；
选择.val（默认值）；
input.data（“ui自动完成”）.term=“”；
}
}
输入=$（“”）
.appendTo（包装器）
.val（默认值）
.attr（“标题”、“名称”）
.addClass（“ui状态默认ui组合框输入”）
.width（选择.width（））
.自动完成({
延迟：0，
最小长度：0，
自动对焦：对，
来源：功能（请求、响应）{
var matcher=newregexp（$.ui.autocomplete.escapeRegex（request.term），“i”）；
响应（选择.children（“选项”）.map（函数（）{
var text=$（this.text（）；
if（this.value&（！request.term | | matcher.test（text）））
返回{
标签：text.replace(
新正则表达式(
（？！[^&；]+；）（？！）（？！[^&；]+；），“gi”
)“$1”，
值：文本，
选项：这个
};
}));