使用Jquery UI Autocomplete创建部分节段

Question

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

我想做类似于last 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 );
    };

- Jonovono

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

- ud3sh

Answer 2

我设置了一个类似的用法，需要两个阶段...第一步是添加标题，我创建了新的菜单项，但将值更改为“标签”，然后我使用以下代码扩展了自动完成的renderItem：

$.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;
};

我也在 "选择" 事件中添加了这个，以确保如果有人单击标签标题，它不会重定向

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

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

我为 'categoryLabel' 设置了 CSS 样式，使其与其他项目不同样式

- Gabriel Doty