2

結果が「インスタント検索」divに入るインスタント検索があります。検索カテゴリを選択するオプションを保持している別の div " search-radio " があります。

結果を削除するドキュメントクリックイベントを設定しましたが、「インスタント検索」divをクリックすると結果も消えます。

いくつかのe.target ||を設定しました。「インスタント検索」div クリックで結果が消えるのを防ぐe.srcElementイベント。

これは Firefox では完全に機能しますが、他のブラウザーでは機能しません。

私の完全なjQueryコード:

$(document).ready(function () {
 $('#search-radio').css('display', 'block');
 $('#search-input').keyup(function()
    {
     var searchIn = $("input:radio:checked").val();
     var keyword=$(this).val();
     $.get('../search/instant-search.php', {keyword: keyword, searchIn:searchIn}, function(data)
        {
        $('#instant-search').html(data);
         });
         $('#search-result').fadeIn(250);
     });

  $('#search-input').attr('autocomplete','off');
  $('#search-input').attr('placeholder','Search');

  $('#search-input').mouseenter(function(){$('#search-result').fadeIn(250);});
  $('#search-input').mouseleave(function(){$('#search-result').fadeOut(250);});

  $('#search-result').on('mouseenter mouseleave', function()
  { 
      $('#search-result').stop();

      $(document).on('click', function(e) 
       {
        if(
           ((e.target.id || e.srcElement.id) != 'instant-search') 
        && ((e.target.id || e.srcElement.id) != 'search-input') 
        && ((e.target.id || e.srcElement.id) != 'search-result')
        && ((e.target.id || e.srcElement.id) != 'search-radio') 
        && ((e.target.id || e.srcElement.id) !='instant-search-container') 
        && ((e.target || e.srcElement).hasclass != 'instant-search') 
        && ((e.target.id || e.srcElement.id) !='check-all')) 
          {
          $('#search-result').fadeOut(250);
          }
       });

   });

});

私の HTML コード:

    <div id="search-wrapper">
<form action="" method="get" id="search-form" >
<div id="search">
<input name="keyword" type="text" size="50"  id="search-input"  />
</div><!--end of search-->

<div id="search-result">
<div id="instant-search"></div><!--end of instant-search-->
<div id="search-radio">
<p>Search In:</p>
  <ul>
      <li><label><input name="search" type="radio" value="all" checked="checked" id="check-all" >All</label></li>
      <li><label><input name="search" type="radio" value="Category2" >Category2</label></li>
      <li><label><input name="search" type="radio" value="Category3" >Category3</label></li>
      <li><label><input name="search" type="radio" value="Category4" >Category4</label></li>
      <li><label><input name="search" type="radio" value="Category5" >Category5</label></li>
  </ul>
</div><!--end of search-radio-->
</div><!--end of search-result-->
</form>
</div><!--end of search-wrapper-->

編集: e.target ||を参照してください。e.srcElementはul liでは機能せず、ラジオ入力は他の場所でのみ機能します。

これをすべてのブラウザで動作させたい。

それを行う可能な方法を見て、提案してください。

ありがとう。

4

1 に答える 1

0

これを試して：

$(function() {
    $('#search-radio').css('display', 'block');

    $('#search-input').on({
        keyup: function() {
            var searchIn = $("input:radio:checked").val();
            var keyword = this.value;
            $.get('../search/instant-search.php', {
                keyword: keyword,
                searchIn: searchIn
            }, function(data) {
                $('#instant-search').html(data);
            });
            $('#search-result').stop().fadeIn(250);
        },
        mouseenter: function() {
            $('#search-result').stop().fadeIn(250);
        },
        mouseleave: function() {
            $('#search-result').stop().fadeOut(250);
        }
    }).attr('autocomplete', 'off').attr('placeholder', 'Search');

    $('#search-result').on('mouseenter mouseleave', function() {
        $('#search-result').stop();
    });

    $(document).on('click', function(e) {
        var flag = true;
        $.each($('*','#search-wrapper'), function(i,elm) {
            if (e.target===elm) flag=false;
        });
        if (flag) $('#search-result').fadeOut(250);
    });
});​

フィドル

于 2012-08-11T07:09:25.507 に答える