34

オートコンプリート検索ボックスを使用したプロジェクトに取り組んでいます。見つかったオートコンプリートの結果から入力ボックスに値を渡したいという問題がありますが、同時に、入力フィールドがフォーカスされていないときにオートコンプリートボックスを非表示にする必要があります。

オートコンプリートボックスをクリックするとフォーカスアウトと見なされ、値を渡す前でもボックスが非表示になるため、両方で競合が発生しています。この種の問題に対するポインタまたは回避策はありますか? ここでは、より明確にするための jsfiddle を示します。

http://jsfiddle.net/KeGvM/

またはここ

CSS :

#a_c {display:none;}​

JS :

$('#search_field').focusout(function() {
    $('#a_c').hide(); // IF I DELETE THIS IT WORKS
});

$('#search_field').focusin(function() {
    $('#a_c').show();
});

$('#a_c a').click(function() {
    $('#search_field').val('');
    var value = $(this).text();
    var input = $('#search_field');
    input.val(input.val() + value);
    $('#a_c').hide();
    return false;
});​

HTML :

<input autocomplete="off" onkeyup="searchFor(this.value);" name="search" id="search_field" class="bold" type="text" placeholder="Search...">
<div id="a_c"><a href="">hello world</a></div>​
4

3 に答える 3

31

同様の状況での私の解決策は、タイムアウトを使用して、blurイベント ハンドラーで実行されるアクションを一時的に保留することでした。このような：

$('#search_field').focusout(function() {
    window.setTimeout(function() { $('#a_c').hide() }, 100);
});
于 2012-12-20T21:09:39.387 に答える