Bagaimana untuk membina komponen kotak kombo dengan fungsi pertanyaan kabur menggunakan jQuery

Pertanyaan kabur kotak kombo jQuery ialah bentuk kotak carian biasa Pengguna boleh memasukkan kata kunci untuk mencari Berbanding dengan carian yang tepat, pertanyaan kabur adalah lebih mudah dan lebih pantas. Dalam artikel ini, kami akan memperkenalkan cara menggunakan jQuery untuk membina komponen kotak kombo dengan fungsi pertanyaan kabur.

1. Pengetahuan asas

Untuk menggunakan pertanyaan kabur kotak kombo jQuery, anda perlu menguasai pengetahuan asas berikut:

1. jQuery

jQuery ialah Pustaka JavaScript yang pantas dan ringkas yang menjadikan manipulasi dokumen HTML, pengendalian acara, kesan animasi, AJAX dan operasi lain lebih mudah. Menggunakan jQuery boleh memudahkan kerumitan pengaturcaraan JavaScript.

2. Combobox

Combobox ialah komponen yang terdiri daripada kotak teks dan kotak senarai juntai bawah Pengguna boleh memasukkan teks atau memilih item dalam senarai juntai bawah . Antaranya, kotak teks digunakan untuk memasukkan kata kunci, dan senarai juntai bawah digunakan untuk memaparkan hasil carian.

3. Pertanyaan kabur

Pertanyaan kabur bermakna apabila pengguna memasukkan kata kunci, sistem mengembalikan semua hasil carian yang mengandungi kata kunci dan bukannya memadankan kata kunci dengan tepat hasil carian.

2. Bina pertanyaan kabur jQuery Combobox

Berikut ialah langkah untuk membina pertanyaan kabur jQuery Combobox:

1. Perkenalkan perpustakaan jQuery

Perkenalkan perpustakaan jQuery di kepala halaman:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

2. Buat kotak teks dan senarai lungsur

Kod HTML adalah seperti berikut:

<label for="search">Search:</label>
<input type="text" id="search">
<select id="results"></select>

3. Tentukan fungsi JS

Tambahkan kod berikut pada penghujung halaman:

$(function() {
  var availableResults = [
    "Result 1",
    "Result 2",
    "Result 3",
    "Result 4",
    "Result 5"
  ];
 
  $("#search").autocomplete({
    source: function(request, response) {
      var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
      response($.grep(availableResults, function(item) {
        return matcher.test(item);
      }));
    }
  });
});

4. Ujian Halaman

Buka halaman dan cari dalam kotak carian Masukkan kata kunci dalam dan senarai juntai bawah akan memaparkan semua hasil carian yang mengandungi kata kunci tersebut.

3. Contoh kod lengkap

  
  
  
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  
  <script>
  $( function() {
    var availableResults = [
      "Result 1",
      "Result 2",
      "Result 3",
      "Result 4",
      "Result 5"
    ];
    $( "#search" ).autocomplete({
      source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
        response( $.grep( availableResults, function( item ){
            return matcher.test( item );
        }) );
      }
    });
  } );
  </script>


 
<label for="search">Search:</label>
<input type="text" id="search">
<select id="results"></select>
 

Ringkasan:

Di atas adalah semua langkah untuk menggunakan jQuery untuk membina pertanyaan kabur Combobox Dengan teknologi ini, anda boleh dengan cepat membangunkan aplikasi web berkeupayaan Carian yang berkuasa. Pada masa yang sama, kami juga perlu memberi perhatian untuk memastikan kecekapan pertanyaan dan ketepatan data pangkalan data untuk mencapai pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk membina komponen kotak kombo dengan fungsi pertanyaan kabur menggunakan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!