jquery melaksanakan fungsi segera automatik

Dalam aplikasi web moden, fungsi auto-promp adalah salah satu fungsi paling asas. Gesaan automatik membolehkan pengguna mendapat gesaan pintar dengan mudah apabila menaip kandungan dalam kotak input dan mempercepatkan kelajuan input, yang boleh memendekkan masa pengguna menunggu hasil pemuatan.

Jadi, bagaimana untuk menggunakan jQuery untuk melaksanakan fungsi gesaan automatik? Proses pelaksanaan khusus diperkenalkan di bawah.

1. Persediaan
Sebelum memulakan pelaksanaan, anda perlu menyediakan perpustakaan jQuery dan fail CSS yang berkaitan. Anda boleh memilih untuk memuat turun fail perpustakaan daripada tapak web rasmi dan memperkenalkannya ke dalam fail HTML, atau anda boleh menggunakan CDN untuk mempercepatkan kelajuan pemuatan fail perpustakaan.

Dari segi fail CSS, anda boleh menggunakan gaya yang disediakan oleh Bootstrap untuk mencantikkan penampilan kotak gesaan. Walau bagaimanapun, langkah ini tidak diperlukan. Jika anda tidak perlu mencantikkan gaya, anda tidak perlu mengimport fail gaya.

2. Dapatkan data
Gesaan automatik perlu menyediakan sumber data, iaitu apabila pengguna memasukkan kandungan, maklumat segera yang berkaitan dengan kandungan input diperoleh daripada sumber data dan dipaparkan di hadapan pengguna. Sumber data ini boleh menjadi fail JSON, jadual pangkalan data atau antara muka API.

Dalam contoh ini, kami menggunakan fail JSON ringkas sebagai sumber data. Fail ini mengandungi nama beberapa bandar yang akan kami berikan petunjuk pintar sebagai pengguna menaip.

Dari segi pengenalan fail, anda boleh menggunakan kaedah AJAX untuk mendapatkan data JSON daripada pelayan. Untuk kemudahan, di sini kami memperkenalkannya terus dalam fail HTML.

3. Tulis kod
Seterusnya, kita boleh mula menulis kod.

1. Struktur HTML

Dalam struktur HTML, kita memerlukan kotak input dan kotak gesaan untuk memaparkan kandungan gesaan pintar. Struktur khusus adalah seperti berikut:

<input id="search-box" type="text" placeholder="输入城市名" />
<div id="suggestion-box"></div>

2. kod jQuery

Pertama, anda perlu mendapatkan kotak teks dan elemen kotak gesaan selepas dokumen dimuatkan dan mengikat acara keyup dalam kotak teks , peristiwa ini dicetuskan apabila pengguna memasukkan.

Seterusnya, untuk setiap input, kita mesti mendapatkan maklumat segera yang berkaitan dengan kandungan input daripada sumber data dan memaparkannya dalam kotak gesaan.

Kod khusus adalah seperti berikut:

$(document).ready(function() {
  // 获取输入框和提示框元素
  var searchBox = $('#search-box');
  var suggestionBox = $('#suggestion-box');

  // 绑定 keyup 事件
  searchBox.keyup(function() {
    // 获取输入框的值
    var currentText = searchBox.val();

    // 根据输入框的值从数据源中获取匹配的提示信息
    var filteredData = data.filter(function(item) {
        return item.toLowerCase().indexOf(currentText.toLowerCase()) > -1;
    });

    // 根据获取到的提示信息生成提示框的内容
    var html = '';
    for (var i = 0; i < filteredData.length; i++) {
        html += '<div class="item">' + filteredData[i] + '</div>';
    }

    // 将生成的内容填充到提示框中
    suggestionBox.html(html);
  });
});

Antaranya, data mewakili pembolehubah global yang digunakan untuk menyimpan maklumat yang diperoleh daripada sumber data. Di sini kami hanya mentakrifkannya sebagai tatasusunan yang mengandungi nama bandar Kandungan khusus adalah seperti berikut:

var data = ['北京', '上海', '广州', '深圳', '杭州', '南京', '武汉', '成都'];

4. Gaya CSS

Selain kod JavaScript, Beberapa gaya CSS adalah. diperlukan untuk mencantikkan kotak segera. Di sini, kami menggunakan gaya yang disediakan oleh Bootstrap, kodnya adalah seperti berikut:

#suggestion-box {
  position: relative;
  z-index: 999;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
}

#suggestion-box .item {
  padding: 5px 10px;
  font-size: 14px;
}

#suggestion-box .item:hover {
  background: #f5f5f5;
}

4. Ringkasan

Melalui kod di atas, kami telah melaksanakan fungsi gesaan automatik ringkas yang boleh menyediakan pengguna dengan gesaan pintar Dan percepatkan kelajuan input. Sudah tentu, dalam aplikasi sebenar, lebih banyak kerja pengoptimuman boleh dilakukan, seperti menggunakan caching untuk mempercepatkan akses kepada sumber data, menggunakan pemuatan tak segerak untuk mengelakkan halaman menyekat, dan sebagainya.

Atas ialah kandungan terperinci jquery melaksanakan fungsi segera automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!