セクションにJquery UIオートコンプリートを使用する

Question

私はhttp://jqueryui.com/demos/autocomplete/を使用しています。私は最後のFMのような何かをしようとしています

は私はわからないカスタムデータの例を使用するなどhttp://www.last.fm

その下にそのための結果と、ヘッダー、その後、別の1がある彼らのオートコンプリート、といそれを正しく行う方法。誰でも何か提案や指針がありますか？

<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

私のセットアップは、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スタイルで他のアイテムと違ったスタイルを設定する

Answer 2

JQuery Autocomplete Categoriesの例を見てください。この例では、オートコンプリートを継承するカスタムウィジェット内のオートコンプリートウィジェットの_renderMenuをオーバーライドする方法があります。

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

サンプルJSフィドル 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; 
};