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

但后来我遇到了另一组布局问题。

还有另一种（“更本地”）的方式吗？

谢谢！

带有固定标头的jQuery UI自动完成功能

0 个答案: