JQuery.

I am using custom jQuery ui fit widget (similar to this http://jqueryui.com/autocomplete/#combobox )

The problem is that elements that have an empty value ("or" ") look like this:

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

      

instead:

<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 the separator to appear in the list instead of an empty string.

My custom _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 be displayed as separator? (it might be worth noting that this worked fine with older version of jQuery (1.4.2) and jQuery UI (1.8.3) and stopped working when trying to update)

TIA!

+3


source to share


2 answers


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

This is how you could override the default _isDivider function used for the autocomplete menu:



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

      

+6


source


Looking at this source file line 6792 says

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

      

So autocomplete uses a widget ui.menu

internally. The menu widget, on the other hand, contains this in its function refresh

(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 the simplest solution: add text that doesn't match this regex. I recommend the escape character &#27;

:

... .append($("<a>").html("&#27;" + item.label))...

      

+6


source







All Articles