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


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹(shù)的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 04-02表格樣式css樣式,css樣式表單
- 04-02好看的字體樣式css,好看的字體樣式圖
- 04-02分頁(yè)樣式css,分頁(yè)樣式j(luò)q
- 04-02分頁(yè)樣式css,分頁(yè)樣式欄里用來(lái)定義首
- 04-02css樣式的引入,css樣式怎么引入
- 04-02css滾動(dòng)條樣式,css滾動(dòng)條的樣式
- 04-02css樣式引入方式有幾種,網(wǎng)頁(yè)引入css樣
- 04-02html中加入css樣式的簡(jiǎn)單介紹
- 04-02vue中的css樣式布局,vue添加css樣式
- 04-02內(nèi)嵌樣式css,內(nèi)嵌樣式表,內(nèi)部樣式表
隨機(jī)閱讀
- 01-10bat批處理徹底隱藏文件的方法(使用
- 01-11常用的HTML富文本編譯器UEditor、CKEdi
- 08-05dedecms織夢(mèng)模板編輯文檔的同時(shí)自動(dòng)更
- 01-10C語(yǔ)言打印楊輝三角示例匯總
- 08-05dedecms織夢(mèng)模板全站調(diào)用收藏?cái)?shù)的方法
- 08-05DEDECMS點(diǎn)擊主欄目默認(rèn)顯示第一個(gè)子欄
- 08-05織夢(mèng)dedecms首頁(yè)調(diào)用縮略圖為背景
- 01-10C++ 類(lèi)訪(fǎng)問(wèn)控制的條件總結(jié)
- 01-10vue實(shí)現(xiàn)分頁(yè)加載效果
- 01-10C++實(shí)現(xiàn)將數(shù)組中的值反轉(zhuǎn)