ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryはWebページ検索機能を実装します
jqueryはWebページ検索機能を実装します
- 不言オリジナル
- 2018-06-28 15:19:532320ブラウズ
この記事では主に Web ページ検索機能の jquery 実装を紹介します。これは、必要な友達に参照してもらえるように共有します。ブラウザの検索機能が実装されています。次に、フロントエンド スクリプトを通じて正確に検索して位置を特定する機能を紹介します。また、検索後の関連情報の表示を拡張することもできます。
この記事では、12306 公式 Web サイトの駅チケット時刻表検索ページの効果を模倣して駅名を検索する例を取り上げます。ユーザーがキーワードを入力して検索ボタンをクリックするか Enter キーを押すと、jQuery は通常の一致コンテンツを使用して正確に一致します。キーワードを検索し、最初に一致した位置までページ位置を素早くスクロールし、関連情報を表示します（この例では、追加情報は駅での切符の販売開始時間です）。HTML
このページには、検索するキーワードを入力するための入力ボックスと検索ボタンを配置し、その後にメインコンテンツ #content (n e388a4556c0f65e1904146cc1a846bee、つまり各期間を含む) を配置する必要があります。開始 切符を販売する駅の名前。
<p id="search_box">
<input class="textbox" id="searchstr" type="text" size="10" name="searchstr" />
<input class="sbttn" id="search_btn" type="button" value="页内查找" />
</p>
<p id="content">
<p><strong>8：00 起售车站</strong><br />
安阳、白城、北京西、成都东、大庆、大庆西、东莞、东莞东、惠州、金华南、缙云、九江、兰州、丽水、临汾、南充、
齐齐哈尔、青田、日照、山海关、汕头、松原、温州、乌兰浩特、乌鲁木齐、武昌、武义、西安、永康、运城。</p>
....此处省略n个p
</p>
CSS
ページコンテンツの簡単なCSS設定.highlightと#tipは、後ほど紹介する検索結果の強調表示と情報プロンプトボックスの表示のスタイル効果をそれぞれ設定するために使用されます。
#search_box { background: white; opacity: 0.8; text-align:right }
#search_btn { background: #0f79be; margin-top: 6px; border-radius: 2px; border: 0px;
width: 100px; line-height: 24px; color: white; }
#searchstr { font-size: 14px; height: 20px; }
.highlight { background: yellow; color: red; }
#tip { background: #ffc; border: 1px solid #999; width: 110px; text-align: center;
display: none; font-size: 12px; }
jQuery
まず第一に、固定 p 効果を実現する必要があります。つまり、ページが下にスクロールすると、検索に使用される入力ボックスとボタンが常にページの上部に固定されます。検索を継続しやすくなります。
(function($) {
$.fn.fixp = function(options) {
var defaultVal = {
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: _top,
left: _left
});
}
});
return $this;
};
})(jQuery); 次に、fixp() を呼び出します。
$(function(){
$("#search_box").fixp({ top: 0 });
}); 次に、最も重要なのは検索機能の実装です。キーワードを入力した後、検索ボタンをクリックするか、Enter キーを押して検索関数highlight()を呼び出します。
$(function(){
...
$('#search_btn').click(highlight);//点击search时，执行highlight函数；
$('#searchstr').keydown(function (e) {
var key = e.which;
if (key == 13) highlight();
})
...
});関数highlight()では多くのことを行う必要があります。1. 最後に強調表示されたコンテンツをクリアします。2. プロンプト情報を非表示にしてクリアします。3. 入力コンテンツが空かどうかを確認します。4. 入力された内容を取得します。 5. 検索結果の数に基づいて、プロンプト情報の内容と位置オフセットを決定し、プロンプトを正確に特定して表示します。情報。具体的なコードを参照してください: $(function(){
...
var i = 0;
var sCurText;
function highlight(){
clearSelection();//先清空一下上次高亮显示的内容；
var flag = 0;
var bStart = true;
$('#tip').text('');
$('#tip').hide();
var searchText = $('#searchstr').val();
var _searchTop = $('#searchstr').offset().top+30;
var _searchLeft = $('#searchstr').offset().left;
if($.trim(searchText)==""){
showTips("请输入查找车站名",_searchTop,3,_searchLeft);
return;
}
//查找匹配
var searchText = $('#searchstr').val();//获取你输入的关键字；
var regExp = new RegExp(searchText, 'g');//创建正则表达式，g表示全局的，如果不用g，
//则查找到第一个就不会继续向下查找了；
var content = $("#content").text();
if (!regExp.test(content)) {
showTips("没有找到要查找的车站",_searchTop,3,_searchLeft);
return;
} else {
if (sCurText != searchText) {
i = 0;
sCurText = searchText;
}
}
//高亮显示
$('p').each(function(){
var html = $(this).html();
//将找到的关键字替换，加上highlight属性；
var newHtml = html.replace(regExp, '<span class="highlight">'+searchText+'</span>');
$(this).html(newHtml);//更新；
flag = 1;
});
//定位并提示信息
if (flag == 1) {
if ($(".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();
if (_left > $(document).width() - _tipWidth) {
_left = _left - _tipWidth;
}
$("#tip").html(_tip).show();
$("#tip").offset({ top: _top, left: _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: _top, left: _left });
}
$("html, body").animate({ scrollTop: _top - 50 });
i++;
if (i > $(".highlight").size() - 1) {
i = 0;
}
}
}
...
});上記のコードで説明されているclearSelection()関数は、ハイライト効果をクリアするために使用されます。コードは次のとおりです: function clearSelection(){
$('p').each(function(){
//找到所有highlight属性的元素；
$(this).find('.highlight').each(function(){
$(this).replaceWith($(this).html());//将他们的属性去掉；
});
});
}最後に、後に表示するために使用されるshowTips()関数を追加します。検索キーワードを入力すると、検索結果のプロンプト情報が表示されます。 $(function(){
var tipsp = '<p class="tipsClass"></p>';
$( 'body' ).append( tipsp );
function showTips( tips, height, time,left ){
var windowWidth = document.documentElement.clientWidth;
$('.tipsClass').text(tips);
$( 'p.tipsClass' ).css({
'top' : height + '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(){$( 'p.tipsClass' ).fadeOut();}, ( time * 1000 ) );
}
}); 以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 関連する推奨事項:
画面をクリックすると jQuery モバイルのヘッダーとフッターが消える問題を解決する方法
JQuery によって実装された自動画像とテキストのカルーセル効果プラグイン
以上がjqueryはWebページ検索機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。