1

我正在做一个需要“产品搜索”的项目，该项目将显示一个带有产品名称和价格的网格。

我正在使用带有 Autocomplete 小部件的 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);
    });
};

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

是否有另一种（“更本地”）的方式来做到这一点？

谢谢！

4

0 回答 0