帶有 jQuery 的迷你幫助系統
在本教程中，我們將使用 jQuery 創建一個迷你幫助系統。這將是一個小部件，它將向您的 Web 應用程序的用戶顯示幫助文本或指南。小部件內容將可實時搜索，所有匹配的詞都會突出顯示。
理念
為了讓這個例子起作用，我們需要做的是：
- 我們必須監聽輸入 文本框上的事件。我更喜歡這個而不是按鍵，因為輸入會捕獲剪切/粘貼和撤消/重做等事件。但舊瀏覽器 (
- 我們將編寫一個名為“highlight”的 jQuery 插件，它將匹配的文本替換為
<span>元素； - 我們將使用jQuery.scrollTo插件來平滑滾動
<span>元素一覽無餘。
HTML
第一步是製定我們將要處理的頁面的 HTML：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Mini Help System with jQuery | Tutorialzine </title>
<!-- Our stylesheet -->
<link rel="stylesheet" href="assets/css/styles.css" />
</head>
<body>
<div id="widget">
<div id="header">
<input type="text" id="search" placeholder="Search in the text" />
</div>
<div id="content">
<!-- Your help text goes here -->
</div>
</div>
<!-- JavaScript Includes -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="assets/js/highlight.jquery.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html> 這裡沒有什麼特別之處——我們在頭部包含了一個樣式表（你可能想自己看一下，我不會在本教程中介紹它）、jQuery 和底部的 scrollTo 插件，以及我們接下來將討論另外兩個 js 文件。小部件有一個文本字段（在 #header div) 和 #content 持有者。在後者中，您應該放置應用程序的幫助指南。
jQuery 代碼
現在我們要編寫一個 jQuery 插件來搜索 #content 中的特定單詞 元素，並將出現的地方替換為 span 元素。例如搜索 javascript 在文本 javascript is awesome 將產生 <span class="match">javascript</span> is awesome .我們稍後將為 .match 設置樣式 跨度為橙色背景，因此很容易區分。
該插件將採用兩個參數 - 一個搜索詞（作為字符串）和一個可選的回調函數，該函數將在搜索/替換過程完成時執行。正如您稍後將看到的，我們將使用回調來掛鉤 scrollTo 插件並滾動 #content div 以顯示匹配項。
在開始閱讀此代碼之前，請記住，您不能簡單地獲取 div 的內部 html，然後在其上調用 replace() 以用 span 元素替換搜索事件，因為這樣會破壞您的標記。如果有人輸入“div " 作為搜索詞，這將導致您的所有 <div> 要替換為 <<span class="match">div</span>> 的元素 ，女巫只是自找麻煩。
解決方案有點複雜（但一旦你明白了就不難了）——我們將使用 contents() jQuery 方法來獲取元素的所有子元素，並 replace() 僅在文本節點上的文本（它們是有保證的不包含任何 html)。然後我們將遞歸遍歷所有元素的非文本節點子節點，並重複這些步驟。
assets/js/highlight.jquery.js
(function($) {
var termPattern;
$.fn.highlight = function(term, callback) {
return this.each(function() {
var elem = $(this);
if (!elem.data('highlight-original')) {
// Save the original element content
elem.data('highlight-original', elem.html());
} else {
// restore the original content
elem.highlightRestore();
}
termPattern = new RegExp('(' + term + ')', 'ig');
// Search the element's contents
walk(elem);
// Trigger the callback
callback && callback(elem.find('.match'));
});
};
$.fn.highlightRestore = function() {
return this.each(function() {
var elem = $(this);
elem.html(elem.data('highlight-original'));
});
};
function walk(elem) {
elem.contents().each(function() {
if (this.nodeType == 3) { // text node
if (termPattern.test(this.nodeValue)) {
// wrap the match in a span:
$(this).replaceWith(this.nodeValue.replace(termPattern, '<span class="match">$1</span>'));
}
} else {
// recursively call the function on this element
walk($(this));
}
});
}
})(jQuery); 瞧，我們的文字充滿了漂亮的亮點！如果您不太了解它的工作原理，請不要擔心 - 它被打包為一個易於使用的 jQuery 插件，因此您可以將其放入您的項目中而無需過多考慮。
插件的使用方法如下：
assets/js/script.js
$(function() {
var search = $('#search'),
content = $('#content'),
matches = $(), index = 0;
// Listen for the text input event
search.on('input', function(e) {
// Only search for strings 2 characters or more
if (search.val().length >= 2) {
// Use the highlight plugin
content.highlight(search.val(), function(found) {
matches = found;
if(matches.length && content.is(':not(:animated)')){
scroll(0);
}
});
} else {
content.highlightRestore();
}
});
search.on('keypress', function(e) {
if(e.keyCode == 13){ // The enter key
scrollNext();
}
});
function scroll(i){
index = i;
// Trigger the scrollTo plugin. Limit it
// to the y axis (vertical scroll only)
content.scrollTo(matches.eq(i), 800, { axis:'y' } );
}
function scrollNext(){
matches.length && scroll( (index + 1) % matches.length );
}
});
在回調中，我觸發 scroll(0) 功能。這會為 #content 設置動畫 div 所以它顯示了該系列的第一場比賽。還有另一個用於滾動的函數 - scrollNext，當您在鍵入時按回車鍵時會調用該函數。這將導致持有者透露下一場比賽。
有了這個，我們的迷你幫助系統就完成了！
結論
您可以使用此示例來增強您的幫助頁面。您還可以充分利用我們在此處創建的突出顯示插件並構建更好的搜索功能，增強您的移動應用程序等等。我很想在評論中聽到你的想法！
