Having sections using Jquery UI Autocomplete

I am using http://jqueryui.com/demos/autocomplete/.

I am trying to do something like last fm does with their autocomplete where there is a header with results for that under it, and then another one, etc. http://www.last.fm

Using the custom data example I am not sure how to do it properly. Anyone have any suggestions or pointers?

<script type="text/javascript">
$(function() {
    $("#findUserIdDisplay").autocomplete({
        source: "ui_autocomplete_users_withuname.php",
        minLength: 2,
        select: function(event, ui) {开发者_如何学JAVA
            $('#findUserId').val(ui.item.id);
        }.data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>"+ item.label + "</a>" ) //  + + "<br>" + item.desc + "</a>"
            .appendTo( ul );
    };

---

Take a look at JQuery Autocomplete Categories example. In this example, the trick is to override _renderMenu of the autocomplete widget in a custom widget that inherits from autocomplete.

http://jqueryui.com/autocomplete/#categories

Sample JS fiddle http://jsfiddle.net/ud3sh/v2Agq/4/

var data = [
  { label: "America", category: "" },
  { label: "Angola", category: "" },
  { label: "Andora", category: "" },
  { label: "Amtrak", category: "Companies" },  
  { label: "Amazon", category: "Companies" },
  { label: "American Airlines", category: "Companies" },
  { label: "Amber L", category: "People" },
  { label: "Amy Quatro", category: "People" },              
  { label: "Andrée González", category: "People" }
];

//widget extension
$.widget("custom.catautocomplete", $.ui.autocomplete, {
    //NOTE: this will process the items in order, so a category could show up multiple times
    _renderMenu: function (ul, items) {
        var that = this;
        var currentCategory = "";
        $.each(items, function (index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            that._renderItemData(ul, item);
        });
    }
});

$("#search").catautocomplete({
    source: function (request, response) {
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
        response($.grep(data, function (value) {
            return matcher.test(value.label) || matcher.test(normalize(value.label));
        }));
    }
});

//utilities for accent mapping
var accentMap = {
    "á": "a","ö": "o","é" : "e"
};
var normalize = function (term) {
    var ret = "";
    for (var i = 0; i < term.length; i++) {
        ret += accentMap[term.charAt(i)] || term.charAt(i);
    }
    return ret;
};

---

I setup a similar usage which required two phases... The first was to add the headers, I created new menu items, but changed the value to "label", then I extended the renderItem for autocomplete using this code :

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
    var startElem = null;

    if(item.value == 'label') {
        startElem = $('<li></li>').addClass('categoryLabel')
            .data( 'item.autocomplete', item )
            .append('<a style="display:none;"></a>')
            .append( item.label )
            .appendTo( ul );
    } else {
        startElem = $('<li></li>').data( 'item.autocomplete', item )
            .append( '<a>' + item.label + '</a>' )
            .appendTo( ul );
    }
    return startElem;
};

I also added this to the "select" event to ensure that if someone clicks on a label header it does not redirect

select: function( event, ui ) {
    event.preventDefault();

    if (ui.item.value != 'label') {
        return;
    }
}

I setup CSS styling for 'categoryLabel' to style it differently than the other items