html頁面中完成查找功能

最近在搞一個被很多人改了的框架，天天看代碼看的頭的暈了，不過感覺進步還挺大的，自己做了一個後台可配置前台查看兩個庫不同數據範圍的東西，還挺滿意，那天拿出來分享一下，今天先說一個這幾天做的功能，就是html頁面的查找功能。

這個功能主要是實現在查找框內輸入字符，之後按後面的上一個下一個按鈕，會自動把查詢區域內的匹配字符用特殊的樣式標記，之後可以繼續按上一個下一個按鈕把按照順序瀏覽匹配字符，並把目前匹配的字符用另一種樣式與其他匹配字符加以區別。

前台顯示大概是這個樣子：

html是這樣：

 <div class=container style=z-index: 999 id=searchDiv> <div class=keyword-search> 尋找： <input id=key type=text style=width: 200px; placeholder=關鍵字/> <a href= javascript:void(0); class=prev onclick='wordSearch(1)'><i class=c-icon></i></a> <a href=javascript:void(0); class=next onclick='wordSearch()'><i class=c-icon></i></ a> </div> </div>

script程式碼：

 <script>//搜尋功能var oldKey0 = ; var index0 = -1;var oldCount0 = 0; var newflag = 0; var currentLength = 0; function wordSearch(flg) { var key = $(#key).val() ; //取key值if (!key) { return; //key為空則退出} getArray(); focusNext(flg); } function focusNext(flg) { if (newflag == 0) {//如果新搜尋,index清零index0 = 0; } if (!flg) { if (oldCount0 != 0) {//如果還有搜尋if (index0 < oldCount0) {//左邊如果沒走完，走左邊focusMove(index0); index0++; } else if (index0 == oldCount0) {//都完成了index0 = 0; focusMove(index0); index0++; } else { index0 = 0;//沒確定focusMove(index0); index0++; } } } else { if (oldCount0 != 0) { //如果還有搜尋if (index0 <= oldCount0 && index0 > 0) {//左邊如果沒走完，左邊走index0--; focusMove(index0); } else if (index0 == 0) {//都走完了index0 = oldCount0; index0-- focusMove(index0); } } } } function getArray() { newflag = 1; $(.contrast .result).removeClass(res); var key = $(#key).val(); //取key值if (!key) { oldKey0 = ; return; //key為空則退出} if (oldKey0 != key || $(.current).length ! = currentLength) { //重置index0 = 0; var index = 0; $(.contrast .result).each(function () { $(this).replaceWith($(this).html()); }); pos0 = new Array(); if ($(.contrast-wrap).hasClass(current)) { currentLength = $(.current) .length; $(.current .contrast).each(function () { $(this).html($(this).html().replace(new RegExp(key, gm), <span id='result + (index++) + ' class='result'> + key + </span>)); // 替換}); } else { $(.contrast-wrap ).addClass('current'); currentLength = $(.current).length; $(.contrast).each(function () { $(this).html($(this).html().replace(new RegExp(key, gm), <span id='result + (index++) + ' class='result'> + key + </span >)); // 替換}); } //$(#key).val(key); oldKey0 = key; //$(.contrast .result).each(function () { // $(this).parents('.contrast-wrap').addClass('current'); // pos0.push($(this).offset().top); //}); // pos0.push ($(.contrast .result:eq(2)).offset().top - $(.contrast .result:eq(2)).parents(.contrast).offset().top); oldCount0 = $(.contrast .result).length; newflag = 0; } } function focusMove(index0) { $(.contrast .result:eq( + index0 + )).parents('.contrast-wrap').addClass('current'); $(.contrast .result:eq( + index0 + )).addClass(res); var top = $(.contrast .result: eq( + index0 + )).offset().top + $(.contrast .result:eq( + index0 + )).parents(.contrast).scrollTop(); var intop = top - $(.contrast .result:eq( + index0 + )).parents(.contrast).offset().top; $(.contrast . result:eq( + index0 + )).parents(.contrast).animate({ scrollTop: intop }, 200); if ($(.contrast .result:eq( + index0 + )).parents(.contrast).scrollTop() == 0) { $(html, body).animate({ scrollTop: top - 200 } , 200); } else { $(html, body).animate({ scrollTop: $(.contrast .result:eq( + index0 + )).parents(.contrast).offset().top - 200 }, 200); } } $('#key').change(function () { if ($(' #key').val() == ) { index0 = 0; $(.contrast .result).each(function () { $(this).replaceWith($(this).html()); }); oldKey0 = ; } }); </script>

首先先把上一次的查詢結果清除掉，然後根據key的值，用正則表達式把區域內所有匹配的字符全都加上特殊的樣式，比如方法中就全部加了一個類名為result的span標籤，用odKey0變數記錄key的值（下次再進入先比較如果一樣的話說明是要看下一個或者上一個的內容，就不用在進入用正則表達式匹配了），oldCount0記錄總共查詢出來的個數，newflag置0（如果不是初次查詢newflag為1）。

接著進入getNext方法，flg表示使用者按下的是上一個還是下一個按鈕，用index0記錄目前查看的是哪一個匹配字符，與oldCount0比較，確定是遞增或遞減還是置0（如果大於oldCount0或小於0 ，就要重新開始）。

focusMove方法就是使頁面定位到目前元素的操作。

eq() 選擇器：選擇器選取帶有指定index 值的元素。例如： $(.contrast .result:eq(1)) ，就是選擇類別名稱contrast元素中的第二個類別名為result的元素。

parents()方法：元素的所有父元素。 $(p).parents('.contrast-wrap') ，p元素所有類別名為contrast-wrap的元素。

replace()方法：用指定的html內容取代被選元素，注意是把被選元素的元素也替換掉。

offset()方法：傳回或設定匹配元素相對於文件的偏移（位置）。

scrollTop()方法：傳回或設定符合元素的捲軸的垂直位置。

以上所述是小編給大家介紹的html頁面中完成查找功能，希望對大家有幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對VeVb武林網站的支持！