为什么在jquery中搜索文本隐藏在标题后面？

我正在处理div中的搜索文本。实际上，我的搜索文本隐藏在标题后面

请采取以下步骤：

单击标题的第四个按钮。搜索字段显示为输入“India”

然后按搜索按钮（最少10次）。经过几次搜索后，按搜索文本位于标题后面

我给它看图片。如果上下滚动，可以看到搜索匹配

这是我的密码

var searchIndex=-1；
var searchTermOld=''；
$（文档）.ready（函数（）{
$（'.searchbox'）。在（'change'，function（）上{
if（$（this.val（）=''）{
var选择器=“#实时内容”；
$（选择器+'span.match'）。每个（函数（）{
$（this.replace为（$（this.html（））；
});
}
searchIndex=-1；
$（'.searchNext'）.attr（“禁用”、“禁用”）；
$（'.searchPrev'）.attr（“禁用”、“禁用”）；
searchTermOld=$（this.val（）；
});
$（'.searchbox'）。在（'keyup'，function（）上{
var选择器=“#实时内容”；
if（$（this.val（）=''）{
$（选择器+'span.match'）。每个（函数（）{
$（this.replace为（$（this.html（））；
});
}
if（$（this）.val（）！==searchTermOld）{
$（选择器+'span.match'）。每个（函数（）{
$（this.replace为（$（this.html（））；
});
searchIndex=-1；
$（'.searchNext'）.attr（“禁用”、“禁用”）；
$（'.searchPrev'）.attr（“禁用”、“禁用”）；
}
});
$（'.search'）。在（'click'，function（）上{
如果（searchIndex==-1）{
var searchTerm=$（'.searchbox'）.val（）；
如果（searchTerm==''）{
PG_警报（“请插入文本”）
返回；
}
searchAndHighlight（searchTerm）；
}
else searchNext（）；
如果（$（'.match'）。长度>1）{
$（'.searchNext'）.removeAttr（“已禁用”）；
$（'.searchPrev'）.removeAttr（“禁用”）；
}
});
$（'searchNext'）。在（'click'，searchNext'）上；
$（'searchPrev'）。在（'click'，searchPrev'）；
});
函数searchAndHighlight（searchTerm）{
如果（搜索术语）{
var searchTermRegEx，匹配项；
var选择器=“#实时内容”；
$（选择器+'span.match'）。每个（函数（）{
$（this.replace为（$（this.html（））；
});
试一试{
searchTermRegEx=new RegExp（“（“+searchTerm+”）”，“ig”）；
}捕获（e）{
返回false；
}
$（'.highlighted'）.removeClass（'highlighted'）；
matches=$（选择器）.text（）.match（searchTermRegEx）；
if（matches！==null&&matches.length>0）{
var txt=$（选择器）.html（）.replace（searchTermRegEx，$1'）；
$（选择器）.html（txt）；
searchIndex++；
$（'.match:first'）.addClass（'突出显示'）；
if（$（'.match'）.eq（搜索索引）.offset（）.top>$（窗口）.height（）-15）{
$（文档）.scrollTop（$（'.match'）.eq（searchIndex.offset（）.top）+500；
}
返回true；
}否则{
PG_警报（“未找到搜索”）；
}
返回false；
}
返回false；
}
函数searchNext（）{
searchIndex++；
如果（searchIndex>=$（'.match'）.length）searchIndex=0；
$（'.highlighted'）.removeClass（'highlighted'）；
$（'.match'）.eq（searchIndex）.addClass（'highlighted'）；
if（$（'.match'）.eq（搜索索引）.offset（）.top>$（窗口）.height（）-10）{
$（文档）.scrollTop（$（'.match'）.eq（searchIndex.offset（）.top）+500；
}
}
函数searchPrev（）{
搜索索引--；
如果（searchIndex<0）searchIndex=$（'.match'）。长度-1；
$（'.highlighted'）.removeClass（'highlighted'）；
$（'.match'）.eq（searchIndex）.addClass（'highlighted'）；
if（$（'.match'）.eq（搜索索引）.offset（）.top>$（窗口）.height（）-10）{
$（文档）.scrollTop（$（'.match'）.eq（searchIndex.offset（）.top）；
}
}
$（文档）.on（'click'，'search_h'，function（）{
//$（“#searchPopupScreen”）.popup（“打开”）
滚动到（0,0）；
$（“.searchbox”）.val（“”）；
$（“#realTimeContents”）.css（“高度”）；
$（“.highlighted”）.removeClass（“highlighted”）.removeClass（“match”）；
//$（'.searchbox'）.focus（）；
$（“输入[类型=范围]”）.val（60）.滑块（“刷新”）；
$（“.searchConference_h”）。切换（“慢速”）；
});
$（文档）。在（'单击'，'上。跟随函数（）{
scrollTo（0，document.body.scrollHeight）；
});

---

此问题有任何更新吗？

首先：您的小提琴不工作（错误），其次，您的问题是什么？这里工作这里是my Fiddle@putvande我的问题是我的搜索文本隐藏在标题下方。搜索“india”。单击标题中的4按钮并搜索“india”，您需要向搜索容器添加一些样式。添加位置：固定为使其可见。您能在我的小提琴上添加吗..实际上，首先您要查看我的小提琴。搜索印度，然后反复按搜索按钮

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==''){
         PG_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).html().replace(searchTermRegEx, '<span class="match">$1</span>');
            $(selector).html(txt);
            searchIndex++;
           $('.match:first').addClass('highlighted');
         if($('.match').eq(searchIndex).offset().top > $(window).height()-15){
  $(document).scrollTop($('.match').eq(searchIndex).offset().top)+500;
}
          return true;
        }else{
          PG_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)+500;
}
}

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

$(document).on('click', '.search_h', function() {
  //$( "#searchPopupScreen" ).popup( "open" )
   window.scrollTo(0,0);
  $(".searchbox").val('');
    $("#realTimeContents").css("height", "");

   $(".highlighted").removeClass("highlighted").removeClass("match");
     // $('.searchbox').focus();
$("input[type=range]").val(60).slider("refresh");
   $(".searchContend_h").toggle("slow");
});

$(document).on('click', '.follow_h', function() {

 window.scrollTo(0, document.body.scrollHeight);


});