Question

我正在做搜索功能。搜索功能工作正常。问题是，当我开始搜索它隐藏我的按钮（搜索，下一个，上一个）。我会解释更多。

搜索“Sachin”字样
然后按搜索它在同一页面上显示sachin但是当你再次单击搜索/下一步它转到下一个文本但按钮上一个/下一个/搜索隐藏（上面）。我需要在搜索时显示该按钮页面.I我需要在div竞争滚动时添加固定高度的东西吗？
这是问题因为如果用户点击第三次它超过然后点击搜索然后搜索项目下降。然后它再次上升。看起来很敬畏。

我需要在搜索时修复页面上的这些按钮。

http://jsfiddle.net/ravi1989/3xbGW/

var searchIndex = -1;
var searchTermOld ='';

$(document).ready(function(){
  $('.searchbox').on('change',function(){
    if($(this).val()===''){
      var  selector= "#realTimeContents";
     $(selector+' span.match').each(function(){
        $(this).replaceWith($(this).html());
      });
    }
      searchIndex = -1;
      $('.searchNext').attr("disabled", "disabled");
      $('.searchPrev').attr("disabled", "disabled");
    searchTermOld = $(this).val();
  });
  $('.searchbox').on('keyup',function(){

    var  selector= "#realTimeContents";
    if($(this).val()===''){
     $(selector+' span.match').each(function(){
        $(this).replaceWith($(this).html());
      });
    }
    if($(this).val() !== searchTermOld){
     $(selector+' span.match').each(function(){
        $(this).replaceWith($(this).html());
      });
      searchIndex = -1;
      $('.searchNext').attr("disabled", "disabled");
      $('.searchPrev').attr("disabled", "disabled");                              
  }
  });
  $('.search').on('click',function(){


    if(searchIndex == -1){
      var searchTerm = $('.searchbox').val();
      if(searchTerm==''){
         alert("Please Insert Text.")
        return ;
      }
      searchAndHighlight(searchTerm);
    }
    else searchNext();
    if($('.match').length >1){
      $('.searchNext').removeAttr("disabled");
      $('.searchPrev').removeAttr("disabled");
    }
  });
  $('.searchNext').on('click',searchNext);

  $('.searchPrev').on('click',searchPrev);
});

function searchAndHighlight(searchTerm) {
    if (searchTerm) {
        var searchTermRegEx, matches;
        var  selector= "#realTimeContents";
        $(selector+' span.match').each(function(){
        $(this).replaceWith($(this).html());
      });
        try {
            searchTermRegEx = new RegExp('('+searchTerm+')', "ig");
        } catch (e) {
            return false;
        }
        $('.highlighted').removeClass('highlighted');
        matches = $(selector).text().match(searchTermRegEx);
                if (matches !==null && matches.length > 0) {
            var txt = $(selector).text().replace(searchTermRegEx, '<span class="match">$1</span>');
            $(selector).html(txt);
            searchIndex++;
           $('.match:first').addClass('highlighted');
         if($('.match').eq(searchIndex).offset().top > $(window).height()-10){
  $(document).scrollTop($('.match').eq(searchIndex).offset().top);
}
          return true;
        }else{
          alert('Search not found.');
        }
      return false;
    }
  return false;
}

function searchNext(){
  searchIndex++;
  if (searchIndex >= $('.match').length) searchIndex = 0;
  $('.highlighted').removeClass('highlighted');
  $('.match').eq(searchIndex).addClass('highlighted');
if($('.match').eq(searchIndex).offset().top > $(window).height()-10){
  $(document).scrollTop($('.match').eq(searchIndex).offset().top);
}
}

function searchPrev(){
  searchIndex--;
  if (searchIndex < 0) searchIndex = $('.match').length - 1;
  $('.highlighted').removeClass('highlighted');
  $('.match').eq(searchIndex).addClass('highlighted');
 if($('.match').eq(searchIndex).offset().top > $(window).height()-10){
  $(document).scrollTop($('.match').eq(searchIndex).offset().top);
}
}

Answer 1

在搜索div中添加ID并将其位置设置为固定

<强> HTML

<div class="ui-grid-c" id="searchbar">
    <input name="text-12" id="text-12" value="" type="text" autocorrect="off" class="searchbox"> 
    <a href="#" data-role="button" data-corners="false" data-inline="true" class="search">Search</a>
    <a href="#" data-role="button" data-corners="false" data-inline="true" id="next" class="searchNext" disabled>Next</a>
    <a href="#" data-role="button" data-corners="false" data-inline="true" id="prev" class="searchPrev" disabled>Previous</a>
</div>

<强> CSS

#searchbar .ui-btn {
    width: 8em;
}
#searchbar .ui-input-text {
    display: inline-block;
}
#searchbar {
    position: fixed;
}
#searchbar + * {
    margin-top: 70px;
}

Demo fiddle - 现在按钮始终可见，但它们可能会掩盖搜索结果

的更新

我设计了一个更好的解决方案。这一次我删除了搜索栏的固定位置，而不是我这样做，因此内容是可滚动的，每当突出显示新的搜索匹配时，内容就会滚动，使搜索栏保持在最顶层。

我对脚本做了一些更改：

将最后三个函数（searchAndHighlight()，searchNext()和searchPrev()）替换为以下函数并添加新函数goToMatch()添加结尾

<强>的Javascript

function searchAndHighlight(searchTerm) { if (searchTerm) { var searchTermRegEx, matches; var selector = "#realTimeContents"; $(selector + ' span.match').each(function () { $(this).replaceWith($(this).html()); }); try { searchTermRegEx = new RegExp('(' + searchTerm + ')', "ig"); } catch (e) { return false; } $('.highlighted').removeClass('highlighted'); matches = $(selector).text().match(searchTermRegEx); if (matches !== null && matches.length > 0) { var txt = $(selector).text().replace(searchTermRegEx, '<span class="match">$1</span>'); $(selector).html(txt); searchIndex++; goToMatch(); return true; } else { alert('Search not found.'); } return false; } return false; } function searchNext() { searchIndex++; if (searchIndex >= $('.match').length) searchIndex = 0; goToMatch(); } function searchPrev() { searchIndex--; if (searchIndex < 0) searchIndex = $('.match').length - 1; goToMatch() } function goToMatch(){ $('.highlighted').removeClass('highlighted'); $('.match').eq(searchIndex).addClass('highlighted'); $('#realTimeContents').animate({ scrollTop: $('.match').eq(searchIndex).get(0).offsetTop}); }

对于新元素样式，您需要将其添加到CSS中：

<强> CSS

.ui-page.ui-body-c.ui-page-active { height: 100%; } #realTimeContents { max-height: 100%; position: relative; overflow-y: auto!important; } #searchbar .ui-btn { width: 8em; } #searchbar .ui-input-text { display: inline-block; } #searchbar { background: #333; width: 100%; }

查看 new fiddle

如何在搜索功能期间设置Div具有（搜索按钮）的位置

1 个答案:

的更新