2

我有一个即时搜索，其中结果进入“即时搜索”div。还有另一个 div “ search-radio ”，我在其中保留了选择搜索类别的选项。

我已经设置了一个删除结果的文档单击事件，但是在单击“即时搜索”div 时结果也会消失。

我设置了一些e.target || e.srcElement事件以防止结果在“即时搜索”div 单击时消失。

这在 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 回答