jQuery UI combo box empty value rendering

Question

I am using the customized combo box jquery ui widget (similar to this one http://jqueryui.com/autocomplete/#combobox)

The problem is that items which have an empty value ("" or " ") render as following:

<li class="ui-widget-content ui-menu-divider"><a><strong></strong> <strong></strong></a></li>

instead of:

<li title="lib" class="ui-menu-item" id="ui-id-36" tabindex="-1"><a><strong></strong>lstrong></strong>i<strong></strong>b<strong></strong></a></li>

this causes a divider to display in the list instead of a blank line.

My customized _renderItem looks like this:

input.data("uiAutocomplete")._renderItem = function(ul, item) {
                    return $("<li title='"+item.value+"'></li>").data("ui-autocomplete-item", item).append("<a>" + item.label + "</a>").appendTo(ul);
                };

Where does jQuery change the empty value to display as a divider? (might be worthwhile to note that this worked fine with an older version of jQuery (1.4.2) and jQuery UI (1.8.3) and stopped working now when trying to upgrade)

TIA!

Answer 1

I found this: http://api.jqueryui.com/menu/#method-_isDivider So that is my answer...

This is how you would override the default _isDivider function used for the autocomplete's menu:

input.data("uiAutocomplete").menu._isDivider= function( item ) {
                      return false;
                }