jquery - 使用 Jquery UI 自动完成功能创建部分

Question

我正在使用http://jqueryui.com/demos/autocomplete/ .

我正在尝试做一些像上一个FM那样的自动完成功能，其中有一个标题，其下有结果，然后是另一个标题，等等。http://www.last.fm

使用自定义数据示例，我不确定如何正确执行。有人有任何建议或指示吗？

<script type="text/javascript">
$(function() {
    $("#findUserIdDisplay").autocomplete({
        source: "ui_autocomplete_users_withuname.php",
        minLength: 2,
        select: function(event, ui) {
            $('#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 );
    };

Answer 1

看一下 JQuery 自动完成类别示例。在此示例中，技巧是在继承自自动完成的自定义小部件中覆盖自动完成小部件的 _renderMenu。

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

示例 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;
};