5

入力要素にバインドされたjQueryUIオートコンプリートと、オートコンプリートボックス内のアイテムのカスタム表示があります。<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スタイルの適切なセレクターがすぐに見つかりませんでした。問題は、jQueryUIがオートコンプリートアイテムの要素ulと要素をページの要素の下部に配置することです。libody

<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>

スタイルを選択するために使用できるクラスまたはIDはありません。ページには他のリスト（メインメニューなど）もあるため、ul/liこのスタイルをレベルで定義したくありません。このスタイルは適用されません。body

bodyただし、結果リストが要素に追加されるのはデフォルトのみです。appendToオートコンプリートウィジェットのオプションを使用して上書きできます。

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

これで、結果リストがidの要素に追加され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;
}
于 2012-06-05T15:17:14.837 に答える