웹 페이지 검색 기능의 jquery 구현 공유 예

이 글은 역명 검색을 예로 들어 12306 공식 홈페이지에서 역 티켓 시간 페이지를 찾는 효과를 흉내낸 것입니다. 사용자가 키워드를 입력하고 검색 버튼을 클릭하거나 Enter 키를 누르면 jQuery가 나타납니다. 정기적인 매칭을 통해 내용을 정확하게 매칭하고, 빠르게 페이지 위치를 첫 번째 매칭 위치로 스크롤하여 관련 정보를 표시합니다. (이 예에서는 추가 정보는 역의 티켓 판매 시작 시간입니다.)

HTML

페이지에는 검색할 키워드를 입력할 수 있는 입력 상자와 검색 버튼을 배치해야 하며, n < p>, 즉 각 시간대에 티켓이 판매되는 역의 이름입니다.

코드 복사 코드는 다음과 같습니다.

판매 중 8:00 역 출발

안양, 바이청, 베이징 서부, 청두 동부, 대경, 대경 서부, 둥관, 둥관 동부, 후이저우, 금화 남부, 진윈, 주장, 란저우, 리수이 , Linfen, Nanchong,
Qiqihar, Qingtian, Rizhao, Shanhaiguan, Shantou, Songyuan, Wenzhou, Ulanhot, Urumqi, Wuchang, Wuyi, Xi'an, Yongkang, Yuncheng.

....n ps는 여기서 생략됩니다

CSS

페이지 콘텐츠에 대한 간단한 CSS 설정 .highlight 및 #tip은 각각 검색 결과 강조 표시 및 정보 프롬프트 상자 표시의 스타일 효과를 설정하는 데 사용됩니다. 그것을 소개합니다.

코드 복사 코드는 다음과 같습니다.

#search_box { 배경: 흰색; 0.8; 텍스트 -정렬:오른쪽 } 
#search_btn { 배경: #0f79be; 테두리 반경: 2px; 너비: 100px; 흰색; } 
#searchstr { 글꼴 크기: 14px; 높이: 20px; } 
.highlight { 배경: 노란색; 빨간색 } 
#tip { 배경: #ffc; #999; 너비: 110px; 텍스트 정렬: 
디스플레이: 없음; 글꼴 크기: 12px;


jQuery

우선 고정 div 효과를 구현해야 합니다. 즉, 페이지를 아래로 스크롤할 때 검색에 사용되는 입력 상자와 버튼이 항상 페이지 상단에 고정되어 검색이 더 쉬워집니다. 계속 검색하세요.

코드 복사

코드는 다음과 같습니다.

(function($) {
    $.fn.fixDiv = 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
              });
            } else {
               $this.offset({
                  위쪽: _top,
                  왼쪽: _left
              })
          }
        }); >        $this를 반환
    })(jQuery);

接着，我们调用fixDiv()。

复代码

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

});

아래로 내리세요. 🎜>

复aze代码

代码如下:$(function(){ ... $('#search_btn').click (highlight);//点击search时，执行highlight函数;

$('#searchstr').keydown(function (e) {

        var key = e.which; 
        if (key == 13) 하이라이트(); 
    }) 
    ... 
}); 

复主代码

代码如下:

$(function(){ 
 ... 
 var i = 0; 
 var sCurText; 
 function 하이라이트(){ 
clearSelection();//First 마지막으로 강조 표시된 내용 지우기; 

 var flag = 0; 
 var bStart = true 

 $('#tip').text(''); '#tip').hide(); 
       var searchText = $('#searchstr').val() 
 var _searchLeft = $('#searchstr').offset().left ; 
 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("The station) 찾고 있던 항목을 찾을 수 없습니다." ,_searchTop,3,_searchLeft); 
                                                                    sCurText = searchText; > } } 
                                                                                                                            단어 바꾸기, 강조 속성 추가 
 var newHtml = html.replace(regExp, '                                                                                                                       html(newHtml) 
           플래그 = 1; () > 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(). 왼쪽; 
           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()函数用来清空高亮效果，代码如下：

复主代码代码如下:

functionclearSelection(){ 
        $('p ').each(function(){ 
            //找到所有highlight属性的元素; 
            $(this).find('.highlight').each(function(){ 
                $(this) .replaceWith($(this).html());//将他们的属性去掉; 
            }) 
        }); 
} 

最后加上showTips()는 유용한 정보를 제공합니다.

复主代码代码如下:

$(function(){ 
    var TipsDiv = '
';  
    $( 'body' ).append( TipsDiv ) ; 
    함수 showTips(tips, height, time,left ){  
        var windowWidth = document.documentElement.clientWidth;  
        $('.tipsClass').text(tips) 
        $( ' div.tipsClass' ).css({  
        'top' : 높이 'px',  
        'left' :왼쪽 'px',  
        'position' : 'absolute',  
        'padding' : '8px 6px',  
        '배경': '#000000',  
        'font-size' : 14 'px',  
        'font-weight': 900, 
        'margin' : '0 auto',  
        'text-align': 'center',  
        'width' : 'auto',  
        'color' : '#fff',  
        'border-radius': '2px',  
        '불투명도' : '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 ) );  
    }  
}); 