sexy-combobox plugin not working inside of jquery dialog

Question

I'm attempting to use this plugin, which turns a select list into a combo box where the user can type their selection in, in addition to the select list functionality.

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. The autocomplete functionality still works if you hit tab or enter with the first few letters of a known value typed in, but the box full of options doesn't appear. Has anybody else encountered this? Is there a known solution/workaround?

from 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>  

from EditProduct.ascx(loaded inside of dialog)

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

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

Answer 1

It looks like that plugin is using an older version of JQuery and is not actively being maintained. There is a fork/alternative linked from the Google Code page: http://code.google.com/p/sexy-combo/

Alternatively, you could look at the JQueryUI Autocomplete widget: http://jqueryui.com/demos/autocomplete/

Answer 2

We used to use this widget too in our site. We've since abandoned using it in favor of a custom jquery.ui plugin that utilizes jquery.ui.button, and specifically a buttonset. The sexycombo plugin had a number of issues that didn't work well for us.

I would suggest looking at writing your own; it was actually quite simple.

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

That pages gives you a good start, including the markup needed. It may not satisfy everything you need, but you could easily achieve the autocomplete functionality with an input next to the button.

Answer 3

I figured out the solution from some of the comments on the google code page. At about line 194 of the jquery.sexy-combo.js script theres a line like this:

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

The problem is, inside of a jquery dialog, for whatever reason, listItems.outerHeight(); returns 0 every time. So to fix this and get the correct behavior, someone recommended setting singleItemheight to some arbitrary value if it was set to 0, like so:

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

Thanks for your suggestions, I really didn't want to have to rewrite my own plugin because I have too much on the go as is.