คืนค่าการตั้งค่าทั้งหมด
คุณแน่ใจว่าต้องการคืนค่าการตั้งค่าทั้งหมด ?
ลำดับตอนที่ #15 : [code] Search Box - กล่องค้นหาตอนย่อย (เก่า)
หลังจากที่แอบเข้าไปดูบทความ Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ของคุณ Caje ซึ่งเป็นบทความที่ดีมากบทความหนึ่ง ก็ได้ไอเดียการเขียนโค้ดใหม่ขึ้นมา ซึ่งก็เนื่องมาจากบทความของคุณ Caje นั่นมีโค้ดมากมายหลากหลายอย่างมาก ทำให้การหาโค้ดที่ต้องการนั้นยากมากขึ้น
โดยโค้ดที่เขียนขึ้นมาก็คือโค้ดที่จะเพิ่มกล่องค้นหาเข้าไปให้กับรายชื่อตอน เพื่อทำให้ผู้เข้าชมค้นหาโค้ดได้ง่ายขึ้น บางคนอาจจะแย้งว่า กด ctrl + f ก็ใช้ได้แล้วจะเขียนทำไมให้วุ่นวาย แต่ว่าการใช้งาน ctrl + f นั้นจะยังคงแสดงทุกตอนไว้อยู่ดี และผู้ใช้ต้องทำการกดหรือเลื่อนไปยังคำที่ค้นเจอคำอื่นๆ แต่ว่าโค้ดการค้นหาตัวนี้จะทำการซ่อนชื่อตอนที่ไม่สอดคล้องไป ทำให้เหลือแต่ชื่อตอนที่มีคำที่ตรงกับคำที่ผู้ใช้กำลังค้นหา
ตัวอย่างดูได้ที่หน้าหลัก
/* Method from http://kilianvalkhof.com/2010/javascript/how-to-build-a-fast-simple-list-filter-with-jquery/ */
$("document").ready(function() {
jQuery.expr[':'].Contains = function(a, i, m) {
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
var searchBox = document.createElement("input");
searchBox.setAttribute("style", "height: 20px; line-height: 25px; margin: 0 5px 0 5px; width: 250px");
searchBox.setAttribute("type", "text");
searchBox.setAttribute("placeholder", "หาโค้ดที่ต้องการไม่เจอ? ลองค้นหาดูสิ");
var t = $((document.getElementsByClassName("box03")[0] || document.querySelector("#storydiv > center > table (n) > tbody > tr (2) > td > table (2)")).children[0]).parent();
$(searchBox).insertAfter($("h2.box02.box02_1.head2 p"));
var list = t.find("li:not(.box03_22)").get();
function makeMatchSeletors(searchText) {
var searchTextList = searchText.split(" ");
var selector = "";
for(var i = 0; i < searchTextList.length; i++) {
selector += "a:Contains(" + searchTextList[i] + "),";
}
return selector.slice(0, -1);
}
function makeNotMatchSeletors(searchText) {
var searchTextList = searchText.split(" ");
var selector = "a:not(";
for(var i = 0; i < searchTextList.length; i++) {
selector += ":Contains(" + searchTextList[i] + ")";
}
return selector + ")";
}
$(searchBox).change(function() {
var searchText = $(searchBox).val();
if (searchText !== "") {
$(list).find("a:not(:Contains(" + searchText + "))").parent().parent().slideUp();
$(list).find("a:Contains(" + searchText + ")").parent().parent().slideDown();
/*$(list).find(makeNotMatchSeletors(searchText)).parent().parent().slideUp();
/*$(list).find(makeMatchSeletors(searchText)).parent().parent().slideDown();*/
} else {
$(list).slideDown();
}
}).keyup(function() {
$(this).change();
});
});See the Pen Dek-D - Search Box by Krerkkiat Chusap (@krerkkiat) on CodePen.
สำหรับปัญหาด้านประสิทธิภาพนั้น เราได้ทำการแก้ปัญหานี้แบบขั้นต้นไปแล้ว ซึ่งทำให้ผลกระทบนั้นลดลง แต่ก็คงต้องหาทางปรับปรุงกันต่อไป (ตอนนี้จนปํญญา ฮ่า)
ความคิดเห็น