นิยาย Code for Dek-d Customization > ลำดับตอนที่ #15 : [code] Search Box - กล่องค้นหาตอนย่อย (เก่า) : Dek-D.com

ลำดับตอนที่ #15

ลำดับตอนที่ #15 : [code] Search Box - กล่องค้นหาตอนย่อย (เก่า)

อัปเดตล่าสุด 2 ก.พ. 59

หลังจากที่แอบเข้าไปดูบทความ 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.

สำหรับปัญหาด้านประสิทธิภาพนั้น เราได้ทำการแก้ปัญหานี้แบบขั้นต้นไปแล้ว ซึ่งทำให้ผลกระทบนั้นลดลง แต่ก็คงต้องหาทางปรับปรุงกันต่อไป (ตอนนี้จนปํญญา ฮ่า)

ติดตามเรื่องนี้

เก็บเข้าคอลเล็กชัน

ลำดับตอนที่ #15 : [code] Search Box - กล่องค้นหาตอนย่อย (เก่า)

krerkkiat

ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

อีบุ๊ก ดูทั้งหมด

3ความคิดเห็น

3ความคิดเห็น

คืนค่าการตั้งค่าทั้งหมด

ลำดับตอนที่ #15 : [code] Search Box - กล่องค้นหาตอนย่อย (เก่า)

krerkkiat

ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

อีบุ๊ก ดูทั้งหมด

3ความคิดเห็น

3ความคิดเห็น