สร้างระบบการค้นหาแบบ Life Time ด้วย jQuery

Published on: Dec 13 2012 by soraya


เป็นการใช้ 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

comments

Powered by Facebook Comments

Filed under: jQuery
Tags: , , , , , , , , , , , ,