kotak regangan pertanyaan jquery

JQuery ialah perpustakaan JavaScript yang ringkas dan mudah digunakan. Ia merangkumi banyak operasi JavaScript biasa dan menyediakan cara mudah untuk memanipulasi dokumen HTML dan elemen DOM. Dalam artikel ini, kami akan memperkenalkan pembaca tentang cara menggunakan JQuery untuk mencipta kotak regangan pertanyaan.

Kotak regangan pertanyaan ialah komponen biasa dalam aplikasi web, yang membolehkan pengguna memasukkan syarat pertanyaan dan mengembalikan hasil. Ia biasanya termasuk kotak teks dan butang "Cari" pilihan. Apabila pengguna memasukkan syarat pertanyaan, kotak regangan menapis hasil secara automatik berdasarkan keadaan input, membantu pengguna mencari perkara yang mereka perlukan dengan lebih cepat.

Untuk mencipta kotak regangan pertanyaan menggunakan JQuery, kita memerlukan langkah berikut:

1. Buat elemen kotak regangan dalam dokumen HTML.

Kita boleh menggunakan elemen asas HTML untuk mencipta kotak regangan. Biasanya, kotak regangan termasuk kotak input dan butang carian. Kotak input digunakan untuk memasukkan syarat pertanyaan, dan butang carian digunakan untuk mencetuskan operasi carian.

Berikut ialah kod HTML mudah untuk mencipta kotak regangan pertanyaan:

<div class="search-container">
  <input type="text" placeholder="输入搜索关键字...">
  <button class="search-button">搜索</button>
</div>

Dalam contoh ini, kami mencipta elemen DIV dengan nama kelas "search-container" , yang mengandungi input kotak jenis "teks" dan butang carian dengan nama kelas "butang carian". Atribut "pemegang tempat" dalam kotak input menyediakan teks lalai untuk kotak input untuk membantu pengguna memahami perkara yang harus dimasukkan.

2. Tambah pustaka JQuery pada halaman

Untuk menggunakan pustaka JQuery, kita perlu menambah pautan ke pustaka JQuery di bahagian kepala atau kaki halaman. Berikut ialah pautan mudah untuk menambah perpustakaan JQuery ke halaman HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Apabila kami menggunakan pautan ini untuk menambah perpustakaan JQuery pada dokumen HTML, kami boleh menggunakan semua ciri JQuery untuk memanipulasi elemen dokumen.

3. Tulis kod JQuery untuk melaksanakan fungsi pertanyaan

Setelah kami mencipta elemen kotak regangan dalam halaman dan menambah perpustakaan JQuery, kami boleh mula menulis kod JQuery ke Fungsi rangka regangan direalisasikan. Kami akan menulis kod berikut untuk menapis elemen mengikut teks yang dimasukkan dalam kotak input dan memaparkan keputusan pada halaman.

$(document).ready(function(){
    $('.search-button').click(function(){
        var searchText = $('.search-container input').val();
        $('.search-list li').each(function(){
            if($(this).text().toUpperCase().indexOf(searchText.toUpperCase()) == -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
});

Kod JQuery di atas menggunakan langkah-langkah berikut:

1. Kami menggunakan fungsi .ready() untuk membalut kod dalam fungsi yang dilaksanakan hanya apabila halaman sudah sedia.
2. Kami menggunakan fungsi .click() untuk membalut kod dalam fungsi yang dilaksanakan apabila butang carian diklik.
3. Kami mula-mula mendapatkan kriteria pertanyaan yang dimasukkan oleh pengguna, yang disimpan dalam nilai kotak carian.
4. Kami menggunakan fungsi .each() untuk melintasi senarai elemen yang mengandungi keputusan (senarai elemen di sini mengambil senarai tidak tertib dengan nama kelas "senarai carian" sebagai contoh).
5. Laksanakan fungsi pada setiap elemen yang memaparkan elemen jika kriteria pertanyaan sepadan dengan teks mana-mana elemen, jika tidak, menyembunyikannya.

Apabila pengguna mengklik butang carian, kod JQuery akan menyemak setiap elemen dalam senarai dan menyembunyikannya jika ia tidak mengandungi kriteria pertanyaan. Jika ia mengandungi kriteria pertanyaan, ia akan kekal kelihatan.

4. Penggayaan CSS

Akhir sekali, untuk menjadikan kotak regangan pertanyaan kelihatan seperti satu set elemen berasingan, kita perlu menambah beberapa penggayaan CSS. Berikut ialah gaya CSS mudah untuk menggunakan gaya kotak carian dan butang carian pada semua kotak regangan pertanyaan pada halaman:

.search-container {
  display: flex;
  align-items: center;
}

.search-container input[type=text] {
  padding: 8px;
  font-size: 17px;
  border: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.search-container button {
  padding: 10px;
  font-size: 17px;
  border: none;
  background-color: #388e3c;
  color: #fff;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}

.search-container button:hover {
  background-color: #388e3c;
}

Dalam gaya CSS di atas, kami berada di bawah kelas .search-container Mentakrifkan beberapa gaya yang digunakan pada elemen DIV yang mengandungi kotak carian dan butang carian. Kami juga menentukan gaya khusus untuk kotak input dan butang carian untuk menjadikannya kelihatan lebih cantik.

Kesimpulan

Dalam artikel ini, kami memperkenalkan pembaca tentang cara menggunakan JQuery untuk mencipta kotak regangan pertanyaan. Kami mencapai matlamat ini dalam empat langkah: mencipta elemen HTML, menambah perpustakaan JQuery, menulis kod JQuery dan menambah gaya CSS. JQuery bukan sahaja memudahkan untuk membuat kotak regangan pertanyaan, tetapi juga menjadikan aplikasi web lebih mesra pengguna dan lebih mudah digunakan.

Atas ialah kandungan terperinci kotak regangan pertanyaan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!