jQuery autocomplete personalization select problem

jQuery autocomplete personalization select problem

Hello,

For presentation purpose, I need to tweak and extend jquery-ui. I need this presentation :


For doing this, I must change the <UL> in <DIV> with a little tweak (last part of the code).

I rewrote the autocomplete refresh method for targeting the good .ui-menu-item

I rewrote the _renderItem and _renderMenu methods to insert the correct html and to highlight the search string.

I also need to implement the select callback to highlight the search string.

But when I click on a result the menu is closing but the string is not set in the input text ...

After other searches, I found in the debugger that the options.select menu callback is called but not the options.select autocomplete callback ... which is called too in a "normal" autocomplete.

Any help will be very very appreciated !

I wrote this Javascript :

$.ui.menu.prototype.refresh = function(){
    // Initialize nested menus
    var menus,
        icon = this.options.icons.submenu,
        submenus = this.element.find( this.options.menus + ":not(.ui-menu)" )
            .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
            .hide()
            .attr({
                role: this.options.role,
                "aria-hidden": "true",
                "aria-expanded": "false"
            });

    // Don't refresh list items that are already adapted
    menus = submenus.add( this.element );

    // I CHANGE THIS LINE
    //menus.children( ":not(.ui-menu-item):has(a)" )
    menus.find('.ui-autocomplete-items-cnt').children( ":not(.ui-menu-item):has(a)" )
        .addClass( "ui-menu-item" )
        .attr( "role", "presentation" )
        .children( "a" )
        .uniqueId()
        .addClass( "ui-corner-all" )
        .attr({
            tabIndex: -1,
            role: this._itemRole()
        });

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

    // Add aria-disabled attribute to any disabled menu item
    // I CHANGE THIS LINE
    //menus.children( ".ui-state-disabled" ).attr( "aria-disabled", "true" );
    menus.find('.ui-autocomplete-items-cnt').children( ".ui-state-disabled" ).attr( "aria-disabled", "true" );

    submenus.each(function() {
        var menu = $( this ),
            item = menu.prev( "a" ),
            submenuCarat = $( "<span>" )
                .addClass( "ui-menu-icon ui-icon " + icon )
                .data( "ui-menu-submenu-carat", true );

        item
            .attr( "aria-haspopup", "true" )
            .prepend( submenuCarat );
        menu.attr( "aria-labelledby", item.attr( "id" ) );
    });

    // If the active item has been removed, blur the menu
    if ( this.active && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
        this.blur();
    }
};

$.ui.autocomplete.prototype._renderItem = function(ul, item){
    var term = this.term.split(' ').join('|');
    var re = new RegExp("(" + term + ")", "gi") ;
    var t = item.label.replace(re,"<strong>$1</strong>");
    return $("<div></div>")
        .data("item.autocomplete", item)
        .append("<a>" + t + "</a>")
        .appendTo(ul.find("." + item.category_id + " .ui-autocomplete-items-cnt"));
        //.appendTo(ul);
};

$.ui.autocomplete.prototype._renderMenu = function(ul, items){
    var that = this,
        currentCategory = "";
    ul.html('<p>Suggestions de recherche</p><div class="auto-cnt"></div><p><a>Voir tous les résultats</a></p>');
    $.each(items, function(index, item) {
        if (item.category_id != currentCategory) {
            ul.find('.auto-cnt').append("<div class=\"ui-autocomplete-category-cnt  clearfix " + item.category_id + "\"><div class=\"ui-autocomplete-category ui-menu-item\"><span>" + item.category + "</span></div><div class=\"ui-autocomplete-items-cnt\"></div></div>");
            currentCategory = item.category_id;
        }
        // I CHANGE THIS LINE
        //that._renderItemData(ul, item);
        that._renderItemData(ul.find("." + item.category_id + " .ui-autocomplete-items-cnt"), item);
    });
};

// AUTOCOMPLETE CREATION
auto = $("#keywords").autocomplete({
    source : function(request, response) {
        var acType = $(this.element).attr('id');
        $.post(aUrl, {
            ft : $('[name=ft]').attr('value'),
            s : request.term,
            w : acType
        }, function(data) {
            response(data.data);
        }, "json");
    },
    minLength : 2,
    select : function(event, ui) {
        var self = this;
        setTimeout(function(){
            $(self).closest('form').find('.search-btn').click();
        }, 20);
    }
});

// Code permettant de passer d'un <UL> à un <DIV>
var oldparent = auto.data('autocomplete').menu.element.parent();

auto.data('autocomplete').menu = $('<div></div>')
    .addClass("ui-autocomplete ui-front")
    .appendTo(oldparent)
    .menu({
        input: $(),
        role : null
    })
    .zIndex(auto.zIndex() + 1)
    .hide()
    .data("menu");