[解決済み] jQuery: blur() イベントの前に click() を実行する。

質問

入力フィールドがあり、そこでオートコンプリートの候補を作ろうとしています。コードは次のようになります。

<input type="text" id="myinput">
<div id="myresults"></div>

入力の blur() イベント時に、resultsのdivを隠したい。

$("#myinput").live('blur',function(){
     $("#myresults").hide();
});

入力に何かを書き込んだら、サーバにリクエストを送信してjsonレスポンスを取得し、それをul->li構造にパースして、このulを自分の #myresults divに配置します。

この解析されたli要素をクリックすると、liの値をinputに設定し、非表示にしたい。 #myresults div

$("#myresults ul li").live('click',function(){
     $("#myinput").val($(this).html());
     $("#myresults").hide();
});

すべてうまくいっているのですが、liをクリックすると blur() の前にイベントが発生します。 click() というイベントが発生し、liのhtmlが入力されなくなります。

どのように設定すれば click() イベントの前に blur() ?

どのように解決するのですか？

解決策1

聞く mousedown ではなく click .

は mousedown と blur のイベントは、マウスボタンを押したときに次々と発生しますが click は離したときだけ発生します。

解決方法2

あなたは preventDefault() で mousedown を使用して、ドロップダウンがフォーカスを奪われないようにブロックしています。わずかな利点は、マウスボタンが離されたときに値が選択されることで、これはネイティブの選択コンポーネントがどのように動作するかということです。 JSFiddle

$('input').on('focus', function() {
    $('ul').show();
}).on('blur', function() {
    $('ul').hide();
});

$('ul').on('mousedown', function(event) {
    event.preventDefault();
}).on('click', 'li', function() {
    $('input').val(this.textContent).blur();
});