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

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

HTML

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

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

 

판매 중 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, '' searchText '')
                                                                                                                      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 ) ); 
    } 
});