5

我有一个 jQuery UI 自动完成绑定到一个输入元素和一个自定义显示自动完成框中的项目。每个项目都有多行，我想将项目彼此清楚地分开，例如使用一个<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（单击“查看源代码”）。）

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

4

2 回答 2

7

由于您显然<hr>仅将元素用于视觉目的，我认为您可以仅使用 CSS 轻松解决此问题：而不是通过 javascript<hr>在每个元素中生成一个元素，只需为除第一个元素之外的每个元素<li>分配一个边框顶部<li>

ul li:not(:first-child) { border-top: 1px #ccc solid; padding: 2em 0; }

产生的效果将是除最后一个之外的每个列表项下的一行，您将避免通过 javascript 注入标记，并且 - 更重要的是 - 插入不必要的逻辑来检测您的最后一项

于 2012-06-05T11:20:39.157 回答
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但是将结果列表附加到元素只是默认设置。可以使用appendToAutocomplete 小部件的选项覆盖它：

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

现在结果列表被附加到具有 id 的元素CustomerWrapper。我已将input元素包装成div具有该 ID 的元素并应用了额外的类样式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;
}
于 2012-06-05T15:17:14.837 回答