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

Published on: Dec 13 2012 by soraya


เป็นการใช้ jQuery ในการสร้างระบบการค้นหาแบบ Life Time ซึ่งจุดเด่นจะเป็นการค้นหาคำที่ต้องการและจะทำไฮไลด์ข้อความเพื่อแสดงความเด่นชัดในการค้นหาโดยเราสามารถเพิ่มข้อมูลเข้าไปภายในหน้าเว็บได้อย่างไม่จำกัดระบบจะทำการค้นหาข้อมูลต่างๆที่อยู่ภายใน โดยเทคนิคนี้เราสามารถประยุคมาใช้งานกับระบบคันหาในเว็บไซต์ของเราเพื่อความรวดเร็วในการค้นหาของผู้ใช้งานได้อีกด้วยลองดูตัวอย่างกันเลย



ตัวอย่างโค้ด html ที่ใช้แสดงหน้าการแสดงผล


< !DOCTYPE html>



Mini Help System with jQuery | Tutorialzine

​​









ตัวอย่างโค้ด assets/js/hight.jquery.js ที่ใช้เรียการทำงานของ jquery


(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, '$1'));
}
} else {
// recursively call the function on this element
walk($(this));
}
});
}
})(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 );
}
});

ดาวน์โหลดโค้ด…..!!!



ขอบคุณข้อมูลจาก tutorialzine

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

Leave a Reply

*

*