Question

我有一个jQuery UI Autocomplete绑定到输入元素和自动填充框中项目的自定义显示。每个项目都有多行，我想清楚地将项目彼此分开，例如使用<hr />元素。以下工作但它也在最后一项之后呈现<hr />元素：

$(function () {
    $("#Customer").autocomplete({
        source: "/SomePath/SearchCustomers?term=ABC",
        select: function (event, ui) {
            $("#CustomerId").val(ui.item.customerId);
            return false;
        }
    })
    .data("autocomplete")._renderItem = function (ul, item) {
        var renderedItem = $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.customerId + ", " + item.name + "<br />"
                + item.addressLine1 + "<br />"
                + item.countryCode + ", " + item.city + "</a>");

        // if (IsNotTheLastItem(item))  <-- Is something like this possible?
            renderedItem = renderedItem.append("<hr />");

        renderedItem = renderedItem.appendTo(ul);

        return renderedItem;
    };
});

（代码源自此处的示例：http://jqueryui.com/demos/autocomplete/#custom-data（点击＆＃34;查看来源＆＃34;）。

是否可以确定我要渲染的项目是否是最后一项（如上面的注释行所示）？或者是否有一些替代方法可以在项目之间添加分隔符，但不是在最后一项之后？

Answer 1

由于您只是出于视觉目的明确使用<hr>元素，我认为您只能使用CSS轻松解决此问题：而不是在每个{{{}内生成<hr>元素1}}通过javascript，只需为每个<li>分配一个border-top，除了第一个

<li>

结果效果将是每个列表项下的一行除了最后一个，你将避免通过javascript注入标记 - 更重要的是 - 插入不必要的逻辑来检测你的最后一项

Answer 2

@F。 Calderan的答案是解决方案的99％。以下只是他答案的附录：

我没有在他的答案中找到一个好的css风格选择器。问题是jQuery UI将自动填充项目的ul和li元素放在页面body元素的底部：

<body>
    <input id="Customer" name="Customer" />

    // more stuff

    // jQuery UI puts the rendered search result here at the end of the page body
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</body>

这里没有可用于选择ul/li样式的类或ID，我不想在body级别定义此样式，因为该页面还有其他列表（如主菜单）不应该使用这种风格。

但结果列表仅作为默认值附加到body元素。可以使用自动填充小部件的appendTo选项覆盖它：

$("#Customer").autocomplete({
    appendTo: "#CustomerWrapper",
    //...
})

现在，结果列表将附加到标识为CustomerWrapper的元素。我已将input元素包装到具有该ID的div并应用了其他类样式ui-autocomplete-multilineitems，因为我只想要自动填充的分隔线，其中项目有多行：

<div id="CustomerWrapper" class="ui-autocomplete-multilineitems">
    <input id="Customer" name="Customer" />
</div>

（input元素不需要包含在div中。div可以放在页面的任何其他位置。）

现在渲染的结果是：

<div id="CustomerWrapper" class="ui-autocomplete-multilineitems">
    <input id="Customer" name="Customer" />

    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

我可以只为css文件中的那些列表元素定义样式：

.ui-autocomplete-multilineitems ul li {
    border-top: 1px #ccc solid;
    padding: 2em 0;
}

.ui-autocomplete-multilineitems ul li:first-child {
    border-top: none;
    padding-top: 0;
}

在jQuery UI自动完成项目之后追加分隔线，但在最后一项之后

2 个答案: