div から検索テキストを操作しています。実際には、検索テキストはヘッダーの後ろに隠されています。
次の手順を実行してください。
- ヘッダーの 4 番目のボタンをクリックします。検索フィールドに「インド」と入力して表示されます
- 次に、検索ボタンを押します (最低 10 回)。検索テキストによるいくつかの検索の後、ヘッダーの後ろにあります。
- 私はそれに画像を表示します。上下にスクロールすると検索結果が表示されます。
これが私のコードです
http://jsfiddle.net/ravi1989/q2HxP/2/
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);
});
この質問の更新はありますか?