性感组合框插件在 jquery 对话框中不起作用答案

【问题标题】：sexy-combobox plugin not working inside of jquery dialog性感组合框插件在 jquery 对话框中不起作用
【发布时间】：2010-09-16 19:30:45
【问题描述】：

我正在尝试使用这个插件，它将选择列表变成一个组合框，用户可以在其中输入他们的选择，除了选择列表功能。

http://vladimir-k.blogspot.com/2009/02/sexy-combo-jquery-plugin.html

The issue I'm having, is when the select list is inside of a jquery dialog, it no longer has the drop down functionality.如果您点击选项卡或输入已知值的前几个字母，自动完成功能仍然有效，但不会出现充满选项的框。有没有其他人遇到过这个？是否有已知的解决方案/解决方法？

来自 site.master

<link href="<%= Url.Content("~/Content/sexy-combo.css") %>" rel="stylesheet" type="text/css" />
<link href="<%= Url.Content("~/Content/sexy/sexy.css") %>" rel="stylesheet" type="text/css" />
<link href="<%= Url.Content("~/Content/custom/custom.css") %>" rel="stylesheet" type="text/css" />

<script src="<%= Url.Content("~/Scripts/jquery.sexy-combo.min.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.bgiframe.min.js") %>" type="text/javascript"></script>

来自 EditProduct.ascx（加载到对话框中）

<script type="text/javascript">
    $('#subCategories').sexyCombo();
</script>

<%: Html.DropDownList("CategoryId", new SelectList(Model.ProductCategories, "CategoryId", "CategoryName", Model.Product.CategoryId), new{ id="subCategories"}) %>

【问题讨论】：

标签： jquery asp.net-mvc combobox dialog

【解决方案1】：

我从谷歌代码页上的一些 cmets 中找到了解决方案。在 jquery.sexy-combo.js 脚本的第 194 行，有这样一行：

    this.singleItemHeight = this.listItems.outerHeight();

问题在于，在 jquery 对话框中，无论出于何种原因，listItems.outerHeight();每次返回 0。因此，为了解决这个问题并获得正确的行为，有人建议将 singleItemheight 设置为任意值（如果它设置为 0），如下所示：

    if (this.singleItemHeight == 0)
    {
        this.singleItemHeight = 20;
    }

感谢您的建议，我真的不想重写我自己的插件，因为我有太多的事情要做。

【讨论】：

对于 SexyCombo 2.1.3，您还必须检查变量初始化（它断言为 null）。将条件语句更新为(!this.singleItemHeight || this.singleItemHeight == 0)。您可能还想使用 === 而不是 == 作为相等运算符，以在强制操作数的值时绕过 JavaScript 的怪癖。

【解决方案2】：

看起来该插件使用的是旧版本的 JQuery，并且没有积极维护。 Google 代码页面有一个 fork/alternative 链接：http://code.google.com/p/sexy-combo/

或者，您可以查看 JQueryUI 自动完成小部件：http://jqueryui.com/demos/autocomplete/

【讨论】：

【解决方案3】：

我们曾经在我们的网站中使用过这个小部件。从那以后，我们放弃了使用它，转而使用使用 jquery.ui.button 的自定义 jquery.ui 插件，特别是一个按钮集。 sexycombo 插件有许多对我们来说效果不佳的问题。

我建议您自己编写；其实很简单。

http://jqueryui.com/demos/button/#splitbutton

该页面为您提供了一个良好的开端，包括所需的标记。它可能无法满足您的所有需求，但您可以通过按钮旁边的输入轻松实现自动完成功能。

【讨论】：