Webページ検索機能のjquery実装の共有例 function_jquery

この記事では、駅名の検索を例として、ユーザーがキーワードを入力して検索ボタンをクリックするか Enter キーを押すと、駅のチケット時刻ページを見つける 12306 公式 Web サイトの効果を模倣します。定期的なマッチングにより、内容を正確かつ迅速にマッチングします。 ページ位置が最初に一致した位置までスクロールし、関連情報が表示されます (この例では、追加情報は駅のチケット販売開始時間です)。

HTML

このページには、検索するキーワードを入力するための入力ボックスと検索ボタンを配置し、その後に n < を含むメイン コンテンツ #content を配置する必要があります。 p>、つまり、各時間帯で切符が販売される駅の名前です。

コードをコピー コードは次のとおりです:

セール中8:00 駅から
安陽、白城、北京西、成都東、大慶、大慶西、東莞、東莞東、恵州、金華南、金雲、九江、蘭州、麗水、臨汾、南充、
チチハル、青天、日照、山海関、汕頭、松原、温州、ウランホト、ウルムチ、武昌、武夷、西安、永康、運城。

....n ps はここでは省略されています

CSS

ページコンテンツの簡単なCSS設定は、それぞれ検索結果の強調表示と情報プロンプトボックスの表示のスタイル効果を設定するために使用されます。それを紹介します。

コードをコピーします コードは次のとおりです。

#search_box { 背景: 不透明度: 0.8; テキスト -align:right }
#search_btn { 背景: #0f79be; 境界線: 2px; 境界線: 100px;白; }
#searchstr { フォントサイズ: 14px; 高さ: 20px; }
.highlight { 背景: #ffc; #999; 幅: 110px; テキスト整列: 中央;

jQuery

まず、固定 div の効果を実現する必要があります。つまり、ページが下にスクロールすると、検索に使用される入力ボックスとボタンが常にページの上部に固定され、検索が容易になります。検索を続けます。

コードをコピーします コードは次のとおりです:

(function($) {
$.fn.fixDiv = function(options) {
vardefaultVal = {
top: 10
};
var obj = $.extend(defaultVal, options);
$this = this;
var _top = $this.offset().top;
var _left = $this.offset().left; $(window).scroll(function() {
var _currentTop = $this.offset().top;
var _scrollTop = $(document).scrollTop();
if (_scrollTop > _top ) {
$this.offset({
top: _scrollTop obj.top,
left: _left
});
} else {
$this.offset({
上: _top,
左: _left
})
}); > $this
})(jQuery);



次に、私は fixDiv() を使用します。

代制

代次:$(function(){ $("#search_box").fixDiv({ top: 0 });

});

次に、最も関連するリンクの実行機能です。関連するリンクの文字を入力すると、ポイントを選択するか、移動するボタンをポイントし、チェック関数highlight()を使用します。

复制代

代码如下:$(function(){ ...

$('#search_btn').click (ハイライト);//点击検索時，执行ハイライト関数；

$('#searchstr').keydown(function (e) {
var key = e.that;
if (key == 13) ハイライト();
})
...
});



在関数highlight()必要做多事情，1.清空上次高亮表示内容，2.隐藏并清空示唆信息，3.入力内容が空の情況であるか判断する，4.获取入力の关键字，并トップページの内容と正確にマッチングし、フラグで結果を検出し、その結果を強調表示し、５． 検出結果の量に応じて、提案情報の内容と位置のずれ量を判断し、位置を決めて提案情報を表示する。代：

复制代码

代码如下:

$(function(){
...
var i = 0;
var sCurText;
function hidden(){
clearSelection();//First最後の強調表示されたコンテンツをクリアします。

var flag = 0;

$('#tip').text(''); '#tip').hide();
var searchText = $('#searchstr').val();
var _searchLeft = $('#searchstr').offset(); ;
if($.trim(searchText)==""){
showTips("検索ステーション名を入力してください",_searchTop,3,_searchLeft);
; キーワード
var regExp = new RegExp(searchText, 'g');//正規表現を作成します。g はグローバルを意味します。g が使用されない場合、
var regExp = new RegExp(searchText, 'g'); // 検索は行われません。最初のものを見つけてから続行します。
var content = $("#content").text();
if (!regExp.test(content)) {
showTips("ステーション探していたものが見つかりませんでした" ,_searchTop,3,_searchLeft);
sCurText = searchText; > } }
単語の置換、ハイライト属性の追加
var newHtml = html.replace(regExp, '' searchText ''); $(".highlight").size; () > 1) {
var _top = $(".highlight").eq(i).offset().top $(".highlight").eq( i).height(); > var _tip = $(".highlight").eq(i).parent().find("strong").text();
if(_tip==" ") _tip = $(".highlight ").eq(i).parent().parent().find("strong").text();
var _left = $(".highlight"). eq(i).offset(). left;
var _tipWidth = $("#tip").width(); _left = _left - _tipWidth;
$("#tip").html(_tip).show();
$("#tip").offset({ 上: _top, 左: _left });
$("#search_btn").val("查找下一个");
}else{
var _top = $(".highlight").offset().top $(".highlight").height();
var _tip = $(".highlight").parent().find("strong").text();
var _left = $(".highlight").offset().left;
$('#tip').show();
$("#tip").html(_tip).offset({ 上: _top, 左: _left });
}
$("html, body").animate({scrollTop: _top - 50 });
私;
if (i > $(".highlight").size() - 1) {
i = 0;
}
}
}
...
});

前述の代コードで提示されたclearSelection() 関数を使用して、清空高輝度効果、代コードのとおり：

复制代 代码如下:

function clearSelection(){
$('p ').each(function(){
//すべてのハイライトプロパティの要素；
$(this).find('.highlight').each(function(){
$(this) .replaceWith($(this).html());// 将他们的属性去掉；
});
}

最後に、showTips() 関数が追加されます。この関数は、キーワード入力後の検索結果を示す情報を表示するために使用されます。

复制代码代码如下:

$(function(){
vartipsDiv = '

';
$( 'body' ).append(tipsDiv ) ;
function showTips(tips, height, time,left ){
var windowWidth = document.documentElement.clientWidth;
$('.tipsClass').text(tips); div.tipsClass' ).css({
'top' : 高さ 'px',
'left' :left 'px',
'position' : 'absolute',
'padding' : '8px 6px',
'background': '#000000',
'font-size' : 14 'px',
'font-weight': 900,
'margin' : '0 auto',
'text-align': 'center',
'width' : 'auto',
'color' : '#fff',
'border-radius': '2px',
'opacity' : '0.8' ,
'box-shadow':'0px 0px 10px #000',
'-moz-box-shadow':'0px 0px 10px #000 ',
'-webkit-box-shadow':'0px 0px 10px #000'
}).show();
setTimeout( function(){$( 'div.tipsClass' ).fadeOut ();}, ( 時間 * 1000 ) ); 
}
});

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。