0

JQuery UI AutoComplete通常のテキストボックスには、Item-Code を含む Item-Name がほとんど表示されません。下の画像に示すように、アイテム名とアイテムコードを- で区切ります。
Pipe-Character " | "

現在、各アイテム/文字列の配置/列の配置は、その長さによって異なります。ある文字列が大きく、別の文字列が短いと言うと、メニューはジグザグのように見えます。文字列を長さ/配置として
表示しようとしています。MenuItemJUSTIFIEDEQUAL

これを達成するには、どのようなCSS変更を加える必要がありますか?

ありがとうございました ：-）

ここに画像の説明を入力

4

2 に答える 2

2

たとえば、オートコンプリートを少し拡張して、各アイテムの HTML をレンダリングすることができます。次に、これらの HTML 要素を好きなようにスタイルできます。各項目内で HTML をレンダリングする方法の例については、これを参照してください: jQuery UI オートコンプリートでの HTML の使用

于 2013-03-18T10:16:47.430 に答える
0

これは私のコードです---

        $.ajax({
            url: 'SomeController/someAction',
            type: 'POST',
            dataType: 'json',
            data: {},
            success: function (data, textStatus, jqXHR) {
                var x;
                $('#txtDeptCode').autocomplete({
                    source: data.Response,
                    minLength: 0,
                    select: function (event, ui) {
                        x = ui.item.value;
                        event.preventDefault();
                        x = x.split('|');
                        $(this).val(x[1].split(' ')[1]);
                    }
                }).data("ui-autocomplete")._renderItem = function rdrItem(ul, item) {
                    return $("<li></li>").data("item.ui-autocomplete", item).append("<a><div style='width:100%;'><div style='width:70%; float:left;'>" + item.value.split('|')[0] + " </div><div style='width:30%; float:right;'> </div><div>(" + item.value.split('|')[1] + ")</div></div></a>").appendTo(ul);
                };

出力は次のとおりです。
ここに画像の説明を入力

于 2013-03-18T12:12:24.027 に答える