4

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!

2 Answers 2

8

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;
                }
1
  • Thanks. Indeed this appears to be a better way than working around the regex. Commented Jul 15, 2015 at 20:44
6

Looking at this sourcefile, line 6792 says

    this.menu = $( "<ul>" ).menu({...});

So, autocomplete is using the ui.menu widget internally. The menu widget, on the other hand, contains this in its refresh function (line 11727 in the same file):

    // Initialize unlinked menu-items containing spaces and/or dashes only as dividers
    menus.children( ":not(.ui-menu-item)" ).each(function() {
        var item = $( this );
        // hyphen, em dash, en dash
        if ( !/[^\-\u2014\u2013\s]/.test( item.text() ) ) {
            item.addClass( "ui-widget-content ui-menu-divider" );
        }
    });

So, easiest solution: add text which doesn't match that regex. I recommend the escape character &#27;:

... .append($("<a>").html("&#27;" + item.label))...
4
  • 1
    Thank you for your response, indeed interesting, but I think that since the value is important to me I would prefer to try and use the _isDivider method somehow but I am getting a little stuck with the syntax: I would like to do something like this which doesn't work yet: input.data("uiAutocomplete").menu._isDivider: function( item ) { return false; }
    – NinaNa
    Commented Aug 27, 2014 at 11:41
  • Your reference in the jQuery code helped me use the solution below, thanks again
    – NinaNa
    Commented Aug 27, 2014 at 12:53
  • No probs, if you're going this way, however, I'd recommend extending _renderMenu rather than the menu itself
    – blgt
    Commented Aug 27, 2014 at 13:02
  • I do already extend the _renderMenu, how would I use the _renderMenu to extend the _isDivider?
    – NinaNa
    Commented Aug 28, 2014 at 4:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.