7

フィルターとして機能する検索ボックスを実装しました。ユーザーが検索領域をクリックすると、可能なすべてのオプションを示すドロップダウン ボックスが表示されます。検索ボックスに入力すると、結果がフィルタリングされます。ボックスの外側をクリックすると、結果が非​​表示になります。

次の HTML/CSS 階層を使用します

<div class="search">
    <input type="text" name="search" value="search" placeholder="search"/>
    <div class="results">
        <div class="result">
            Result 1
        </div>
        <div class="result">
            Result 2
        </div>
        ...
    </div>
</div>

jQuery を使用して、フォーカス/ぼかしイベントのドロップダウンを表示/非表示にします

var searchBar = {
    init : function(){
        $('input[name=search]').focus(searchBar.openSearch);
        $('input[name=search]').blur(searchBar.closeSearch);
        $('div.result').each(function(e){
            $(this).click(draftboardDynamic.selectResult);
        }); 
    },
    openSearch : function(e){
        $('div.results').show();
    },
    closeSearch : function(e){
        $('div.results').hide();
    },
    selectResult : function(e){
        console.log($(this));
    },
}
$(document).ready(searchBar.init);

これは非常にうまく機能し、問題なく開いたり、閉じたり、検索したりできます (わかりやすくするために JS を削除しました)。私が問題を抱えている唯一のビットは、結果の選択です。Blur イベントは result.click イベントの前にトリガーされるようで、ハンドラーが呼び出されることはありません。ぼかしバインディングを削除することでこの問題を修正できますが、入力がフォーカスを失ったときにドロップダウン ボックスを閉じる方法がわかりません。

何か案は？

4

3 に答える 3

3

.blurイベントは常に の前に発生するため、これは難しい問題.clickです。考えられる解決策は 2 つありますが、どちらも特に望ましいものではありません。

  1. .blurにカーソルを合わせると、イベントのバインドが解除されdiv.resultます。マウスアウトで再バインドします。
  2. でこれを行う代わりに.blur、クリック イベントをドキュメントにバインドし、ターゲットが検索コンポーネントのいずれでもないことを確認します。
于 2012-05-16T22:30:39.550 に答える
2

「クリック」の代わりに「マウスダウン」イベントを使用します。

$(".container")
  .on("blur focus", "input", function({type}) {
    $(this).next().toggle(type === "focusin");
  })
  .on("mousedown", "ul", function({target: {innerText}}) {
    $(this).prev().val(innerText);
  });


$(".container")
  .on("blur focus", "input", function({type}) {
    $(this).next().toggle(type === "focusin");
  })
  .on("mousedown", "ul", function({target: {innerText}}) {
    $(this).prev().val(innerText);
  });
.container {
  position: relative;
  display: inline-block;
}
  
input, ul {
  border: solid 1px black;
}

ul {
  list-style: none;
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  margin: -1px 0 0;
  padding: 0;
}
  
label, li {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
<label for="_input"><b>Select value:</b></label>

<div class="container">
  <input id="_input">
  <ul style="display:none">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

<a href="#_input">Picked a wrong value?</a>

于 2016-09-06T17:21:47.783 に答える