-1

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

  1. 搜索单词“Sachin”
  2. 然后按搜索它在同一页面上显示 sachin 但是当您再次单击搜索/下一个时，它会转到下一个文本但是按钮上一个/下一个/搜索隐藏（转到上面）。我需要在搜索时显示这个按钮。我需要的东西在 div 竞争滚动的地方添加固定高度？
  3. 这是问题，因为如果用户点击第三次它会在上面然后点击搜索然后搜索项会下降。然后它又会上升。它看起来很敬畏这个词。

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

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);
}
}
4

1 回答 1

2

将 id 添加到您的搜索 div 并将其位置设置为固定

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;
}

演示小提琴- 现在按钮始终可见，但它们可能会掩盖搜索结果

更新

我设计了一个更好的解决方案。这次我删除了搜索栏的固定位置，而是将其设置为可滚动的内容，并且每当突出显示新的搜索匹配时，滚动内容，将搜索栏留在顶部。

我对脚本进行了一些更改：

将最后三个函数 (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%;
}

看看新的小提琴

于 2013-07-30T01:40:37.697 回答