কিভাবে তালিকা/সার্চ ফিল্টার করা/সার্চ করা

জাভাস্ক্রিপ্টের মাধ্যমে ফিল্টার তালিকা তৈরি করা কিভাবে শিখুন。

সার্চ তালিকা তৈরি করুন

প্রথম পদক্ষেপ - HTML যোগ করুন:

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<ul id="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

মন্তব্য:এই প্রদর্শনে, আমরা href="#" ব্যবহার করছি, কারণ আমাদের কোনো পৃষ্ঠা লিঙ্ক করা হয়নি।ক্ষত্রকালীন প্রয়োগে, এটি একটি পৃষ্ঠার রিয়েল ইউআরএল হওয়া উচিত।

দ্বিতীয় পদক্ষেপ - CSS যোগ করুন:

ইনপুট এবং তালিকার শৈলী নির্ধারণ করুন:

#myInput {
  background-image: url('/css/searchicon.png'); /* ইনপুট ফিল্ডে সার্চ আইকন যোগ করুন */
  background-position: 10px 12px; /* সার্চ আইকন স্থানীয়করণ */
  background-repeat: no-repeat; /* আইকন চিত্রকে পুনরাবৃত্তি না করুন */
  width: 100%; /* পুরো চশ্মা */
  font-size: 16px; /* ফন্ট সাইজ বাড়ান */
  padding: 12px 20px 12px 40px; /* কিছু ইনার প্যাডিং যোগ করুন */
  border: 1px solid #ddd; /* গ্রীষ্মকালীন হুকি ডিজাইন যোগ করুন */
  margin-bottom: 12px; /* ইনপুট ফিল্ডের নিচে কিছু জায়গা যোগ করুন */
}
#myUL {
  /* ডিফল্ট তালিকা শৈলী নিষ্ক্রয় */
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#myUL li a {
  border: 1px solid #ddd; /* সকল লিঙ্ককে ফ্রেম যোগ করুন */
  margin-top: -1px; /* দ্বিপাশবর্তী ফ্রেমকে বিচ্ছিন্ন করুন */
  background-color: #f6f6f6; /* গ্রীষ্মকালীন রঙযুক্ত প্রক্ষেপণ */
  padding: 12px; /* কিছু ইনার স্পেসিং যোগ করুন */
  text-decoration: none; /* ডিফল্ট লিঙ্ক হাইলাইটিং সরান */
  font-size: 18px; /* ফন্ট আকার বাড়ান */
  color: black; /* কালো লেখার রঙ যোগ করুন */
  display: block; /* তালিকার সমস্ত বান্ধব বস্তুকে বলক হিসাবে পরিবর্তন করুন */
}
#myUL li a:hover:not(.header) {
  background-color: #eee; /* সকল লিঙ্ক (শীর্ষক ছাড়া) হভিং ইফেক্ট যোগ করুন */
}

তৃতীয় পদক্ষেপ - JavaScript যোগ করুন:

<script>
function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');
  // সমস্ত তালিকা আইটেমগুলি পরিদর্শন করুন এবং যেসব অনুসন্ধান কোয়াইলের সাথে মিল না খুঁজে পাওয়া যায়, তা সুমন্ত করুন
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

স্বয়ং প্রয়োগ করে দেখুন

সূচনা:যদি আপনি হাইপারন্যাম্পা সহকারে সর্বশৃঙ্খলা সংশ্লেষণ করতে চান, তবে toUpperCase() মুছে ফেলুন।

相关页面

教程：কিভাবে সারিতে ফিল্টার/সার্চ করা যায়