html頁面中完成查找功能
最近在搞一個被很多人改了的框架,天天看代碼看的頭的暈了,不過感覺進步還挺大的,自己做了一個后臺可配置前臺查看兩個庫不同數(shù)據(jù)范圍的東西,還挺滿意,那天拿出來分享一下,今天先說一個這幾天做的功能,就是html頁面的查找功能。
這個功能主要是實現(xiàn)在查找框內(nèi)輸入字符,之后按后面的上一個下一個按鈕,會自動把查詢區(qū)域內(nèi)的匹配字符用特殊的樣式標(biāo)記,之后可以繼續(xù)按上一個下一個按鈕把按照順序瀏覽匹配字符,并把當(dāng)前匹配的字符用另一種樣式與其他匹配字符加以區(qū)別。
前臺顯示大概是這個樣子:
html是這樣:
<div class="container" style="z-index: 999" id="searchDiv"> <div class="keyword-search"> 查找: <input id="key" type="text" style="width: 200px;" placeholder="關(guān)鍵詞" /> <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>
接下來記一下實現(xiàn)原理:
首先先把上一次的查詢結(jié)果清除掉,然后根據(jù)key的值,用正則表達式把區(qū)域內(nèi)所有匹配的字符全都加上特殊的樣式,比如方法中就全部加了一個類名為result的span標(biāo)簽,用odKey0變量記錄key的值(下次再進入先比較如果一樣的話說明是要看下一個或者上一個的內(nèi)容,就不用在進入用正則表達式匹配了),oldCount0記錄總共查詢出來的個數(shù),newflag置0(如果不是初次查詢newflag為1)。
接著進入getNext方法,flg表示用戶按下的是上一個還是下一個按鈕,用index0記錄當(dāng)前查看的是哪一個匹配字符,與oldCount0比較,確定是遞增或遞減還是置0(如果大于oldCount0或者小于0,就要重新開始)。
focusMove方法就是使頁面定位到當(dāng)前元素的操作。
學(xué)到的jquery方法:
eq() 選擇器:選擇器選取帶有指定 index 值的元素。例如:$(".contrast .result:eq(1)")
,就是選擇類名contrast元素中的第二個類名為result的元素。
parents()方法:元素的所有父元素。$("p").parents('.contrast-wrap')
,p元素所有類名為contrast-wrap的元素。
replace()方法:用指定的html內(nèi)容替換被選元素,注意是把被選元素的元素也替換掉。
offset()方法:返回或設(shè)置匹配元素相對于文檔的偏移(位置)。
scrollTop()方法:返回或設(shè)置匹配元素的滾動條的垂直位置。
總結(jié)
以上所述是小編給大家介紹的html頁面中完成查找功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對我們網(wǎng)站的支持!
欄 目:CSS/HTML
下一篇:HTML實現(xiàn)2列布局(左側(cè)寬度固定,右側(cè)自適應(yīng))的方法示例
本文標(biāo)題:html頁面中完成查找功能
本文地址:http://mengdiqiu.com.cn/a1/CSS_HTML/9521.html
您可能感興趣的文章
- 04-02好看的字體樣式css,好看的字體樣式圖片
- 04-02html中加入css樣式的簡單介紹
- 04-02內(nèi)嵌樣式css,內(nèi)嵌樣式表,內(nèi)部樣式表,外部樣式表中優(yōu)先級最高的
- 04-02vue中的css樣式布局,vue添加css樣式
- 01-10利用iframe在網(wǎng)頁中顯示天氣附效果截圖
- 01-10通過html為FLASH加鏈接的實現(xiàn)代碼(div層)
- 01-10a標(biāo)簽中寫有文字如何隱藏文字顯示圖片兼容360模式渲染
- 01-10IE瀏覽器HTML Hack標(biāo)簽總結(jié)
- 01-10html用style添加屬性示例
- 01-10HTML中rel屬性分析


閱讀排行
本欄相關(guān)
- 04-02表格樣式css樣式,css樣式表單
- 04-02好看的字體樣式css,好看的字體樣式圖
- 04-02分頁樣式css,分頁樣式j(luò)q
- 04-02分頁樣式css,分頁樣式欄里用來定義首
- 04-02css樣式的引入,css樣式怎么引入
- 04-02css滾動條樣式,css滾動條的樣式
- 04-02css樣式引入方式有幾種,網(wǎng)頁引入css樣
- 04-02html中加入css樣式的簡單介紹
- 04-02vue中的css樣式布局,vue添加css樣式
- 04-02內(nèi)嵌樣式css,內(nèi)嵌樣式表,內(nèi)部樣式表
隨機閱讀
- 01-10bat批處理徹底隱藏文件的方法(使用
- 01-11常用的HTML富文本編譯器UEditor、CKEdi
- 08-05dedecms織夢模板編輯文檔的同時自動更
- 01-10C語言打印楊輝三角示例匯總
- 08-05dedecms織夢模板全站調(diào)用收藏數(shù)的方法
- 08-05DEDECMS點擊主欄目默認(rèn)顯示第一個子欄
- 08-05織夢dedecms首頁調(diào)用縮略圖為背景
- 01-10C++ 類訪問控制的條件總結(jié)
- 01-10vue實現(xiàn)分頁加載效果
- 01-10C++實現(xiàn)將數(shù)組中的值反轉(zhuǎn)