0

そのため、jquery オートコンプリートと、検索ボックスに挿入できる特殊文字アイコン (É、ã など) を含む追加の div...

ユーザーが入力するたびに-オートコンプリートドロップダウンが表示されますが、ユーザーが特殊文字アイコンをクリックする必要がある場合（検索ボックスに挿入されるため）->オートコンプリートドロップダウンは、フォーカスが失われたため、予想通り閉じます:(

ユーザーが特殊文字アイコンのいずれかをクリックした場合に、jquery オートコンプリート ドロップダウンがフォーカスを失ったときに非表示になるのを防ぐ方法はありますか?

4

1 に答える 1

1

編集:これは、選択ボックスで使用するためのjqueryオートコンプリートコンボボックスを対象としていますが、同じ解決策と思考プロセスがオートコンプリートにも確実に適用されます(あなたの問題に遭遇したとき、私はコンボボックスに取り組んでいました:)

HTML:

<select class="combobox">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="add_another">Add Another Option</option>
</select>

CSS:

.force-open{
    display:block !important;
}

JS:

$(function() {
$( ".combobox" ).combobox({

     // the select event is apparently the only event
     // that you can pass a function, so if your goal
     // is to keep it open specifically when a user
     // clicks an option, then this is where you should start

     select: function(event, ui) {
            $(event.currentTarget)
            .parent()
            .next("ul")
            .addClass("force-open");
     }
});


$(".custom-combobox .ui-button").click(function(){

    //This is the actual answer to your question,
    //which is specifically forcing the jquery selectbox
    //to stay open after it has already been opened,
    //regardless of the change in focus.

    $(this)
    .parent()
    .next("ul")
    .addClass("force-open");
})
});

説明：

通常、Web 開発を行っているときに、特定のライブラリまたはコードのチャンクに対して適切な公開イベントがない場合に私がやろうとしていることは (ソース コードをハック/更新しようとする以外に...)、html の構造を調べることです。 library/js から生成されます (存在する場合)。

この場合、 $( ".combobox" ).combobox({...}) を呼び出した後に jquery-ui から生成された html は次のとおりです。

<select class="combobox" style="display: none;">
....shown above in HTML section...
<span class="custom-combobox">
<span class="ui-helper-hidden-accessible" role="status" aria-live="polite">4 results are available, use up and down arrow keys to navigate.</span>
<input class="custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left ui-autocomplete-input" title="" autocomplete="off">
<a class="ui-button ui-widget ui-state-default ui-button-icon-only custom-combobox-toggle ui-corner-right" tabindex="-1" title="Show All Items" role="button" aria-disabled="false">
</span>
<ul id="ui-id-1" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" tabindex="0" style="display: none; width: 209px; top: 43px; left: 8px;">
<li class="ui-menu-item" role="presentation">
<a id="ui-id-2" class="ui-corner-all" tabindex="-1">Volvo</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-3" class="ui-corner-all" tabindex="-1">Saab</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-4" class="ui-corner-all" tabindex="-1">Mercedes</a>
</li>
<li class="ui-menu-item" role="presentation">
<a id="ui-id-5" class="ui-corner-all" tabindex="-1">Add Another Option</a>
</li>
</ul>

これは、必要な機能を強制するために css クラスを追加/削除するための出発点となります。これは最後の手段であり、イベントのバインド/バインド解除に役立つ完全な機能を備えた API がない場合にのみ悪用する必要があることに注意してください。HTML 構造を調べることで、jquery セレクター/メソッドを使用して、この場合、開いたままにしようとしている正しい「ul」タグを取得できます。したがって、jquery を使用して必要な ul を取得した後、「display:block !important;」を持つ「force-open」クラスを追加します。、最終的には、フォーカスに関係なく、jquery コンボボックスを開いたままにします。コンボボックスを「閉じる」必要があると感じたら、単純に removeClass を「強制的に開く」ようにします。

お役に立てれば ：）。

于 2013-09-08T20:14:57.030 に答える