javascript - 固定ヘッダーを使用した jQuery UI オートコンプリート

Question

製品名と価格のグリッドを表示する「製品検索」を必要とするプロジェクトに取り組んでいます。

これを実現するために、オートコンプリート ウィジェットで jQuery UI を使用しています。

「グリッド」を表示するために、_renderItem 関数をオーバーライドして、行ごとにフローティング div を使用し、偽のテーブル セルとして機能させています。

$('#search').autocomplete().data("ui-autocomplete")._renderItem = function(ul, item){
    var line_item = '';
    line_item += "<a><div class='search_row'>";
    line_item += "<div class='sku'>"+item.sku+"</div>";
    line_item += "<div class='product_name'>"+item.label+"</div>";
    line_item += "<div class='product_price'>ET:"+item.price+"</div>";
    line_item += "</div></a>";

    return $("<li>")
    .append(line_item)
    .appendTo(ul);
};

グリッドは、垂直スクロールで 400px の高さに制限されています。

私の唯一の問題は、上部にスクロールしない固定ヘッダーが必要なことです。

次のようなものを使用してみました：

$('#search').autocomplete().data("ui-autocomplete")._renderMenu = function(ul, items){
    var self = this;
    $.each(items, function(index, item){
        if(index == 0){
            ul.append('<li><div style="position:fixed; background-color:blue;">TEST HEADERS</div></li>');
        }

        self._renderItem(ul, item);
    });
};

しかし、その後、別の一連のレイアウトの問題が発生します。

これを行う別の（「よりネイティブな」）方法はありますか？

ありがとう！