เป็นการใช้ jQuery ในการสร้างระบบการค้นหาแบบ Life Time ซึ่งจุดเด่นจะเป็นการค้นหาคำที่ต้องการและจะทำไฮไลด์ข้อความเพื่อแสดงความเด่นชัดในการค้นหาโดยเราสามารถเพิ่มข้อมูลเข้าไปภายในหน้าเว็บได้อย่างไม่จำกัดระบบจะทำการค้นหาข้อมูลต่างๆที่อยู่ภายใน โดยเทคนิคนี้เราสามารถประยุคมาใช้งานกับระบบคันหาในเว็บไซต์ของเราเพื่อความรวดเร็วในการค้นหาของผู้ใช้งานได้อีกด้วยลองดูตัวอย่างกันเลย
ตัวอย่างโค้ด html ที่ใช้แสดงหน้าการแสดงผล
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | < !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> |
ตัวอย่างโค้ด assets/js/hight.jquery.js ที่ใช้เรียการทำงานของ jquery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | (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); |
ตัวอย่างโค้ด assets/js/script.js ใช้ในการเลื่อนสไลน์เมื่อมีการค้นหาในส่วนต่างๆ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | $(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 ); } }); |
ดาวน์โหลดโค้ด…..!!!
ขอบคุณข้อมูลจาก tutorialzine
Comments
Powered by Facebook Comments