jquery는 웹 페이지 검색 기능을 구현합니다.
- 不言원래의
- 2018-06-28 15:19:532320검색
이 글은 주로 웹페이지 검색 기능의 jquery 구현을 소개합니다. 이제 특정 참조 가치가 있어 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.
페이지에서 키워드를 찾아야 할 때 먼저 둘째, 프론트 엔드 스크립트를 통해 정확한 검색 및 위치 지정이 가능하며, 검색 후 관련 정보 표시를 확장할 수 있습니다.
이 기사에서는 12306 공식 웹사이트 검색 역 티켓 시간 페이지 효과를 모방하여 역 이름을 찾는 예를 들어 사용자가 키워드를 입력하고 검색 버튼을 클릭하거나 Enter 키를 누르면 jQuery가 일반 일치 콘텐츠를 사용하여 정확하게 일치시킵니다. 키워드를 입력하고 페이지 위치를 첫 번째 일치 위치로 빠르게 스크롤합니다. 관련 정보를 표시합니다(이 예에서 추가 정보는 역에서 티켓 판매 시작 시간입니다).HTML
페이지에는 검색할 키워드를 입력하기 위한 입력 상자와 검색 버튼을 배치해야 하며, ne388a4556c0f65e1904146cc1a846bee, 즉 각 기간을 포함하는 기본 콘텐츠 #content가 있어야 합니다. 시작 티켓이 판매되는 역의 이름입니다.<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 키를 누르면 검색 기능인 하이라이트()가 호출됩니다. $(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 중국어 홈페이지를 주목해주세요! 관련 권장사항:
화면을 클릭하면 jQuery 모바일의 머리글과 바닥글이 사라지는 문제를 해결하는 방법
JQuery에서 구현한 자동 이미지 및 텍스트 캐러셀 효과 플러그인
위 내용은 jquery는 웹 페이지 검색 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.