0

#autoc1オートコンプリートに使用されるフィールドがあります。

すべてうまく機能しますが、生成されたアイテムの最後にアイテムをUL追加して、オートコンプリートで探しているものが見つからない場合にユーザーが新しいアイテムを追加できるようにしたいと考えています。

私の考えは、生成さULれたオンフォーカスをテキスト入力に追加して、オプションが常にそこにあるようにすることです

私は次のことを試みていますが、うまくいきません：

$(function() {
            $( "#autoc1" ).autocomplete({
                source: "/pages/includes/getAgent.php",
                minLength: 2,
                select: function( event, ui ) {
                    $('#autoc1').val(ui.item.agent_name);
                    $('#comm').val(ui.item.commission_percent);
                    return false;
                }
            }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li>" )
                .append( "<a>" + item.agent_name + "</a>" )
                .appendTo( ul )
            };

            $('#autoc1').focus(function() {
                $('#ui-id-1').append('<li><a href="new.html">Add new</a></li>');
            });
});

これは自動生成されたhtmlです

<ul style="display: none; width: 360px; top: 248px; left: 856.5px;" tabindex="0" id="ui-id-1" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all">
    <li role="presentation" class="ui-menu-item">
        <a tabindex="-1" class="ui-corner-all" id="ui-id-2">agent a</a>
    </li>
    <li role="presentation" class="ui-menu-item">
        <a tabindex="-1" class="ui-corner-all" id="ui-id-3">agent b</a>
    </li>
</ul>
4

1 に答える 1

2

状況を理解していれば、「新しいアイテム」要素を の後に<ul>配置し、状況に応じて表示/非表示にするだけで、おそらくよりきれいに機能するでしょう。このようなもの：

HTML

<ul style="display: none; width: 360px; top: 248px; left: 856.5px;" tabindex="0" id="ui-id-1" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all">
    ...
</ul>
<div id="new-item">
    <label>
        New item
        <input type="text" />
    </label>
</div>

JS

$('#autoc1').focus(function() {
    $('#new-item').show();
});
于 2013-03-30T08:16:56.857 に答える