Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi carian masa nyata dalam kotak input teks?-tutorial js-php.cn

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi carian masa nyata dalam kotak input teks?

PHPz

Lepaskan： 2023-10-24 11:33:45

asal

1251 orang telah melayarinya

如何使用 JavaScript 实现文本输入框实时搜索功能？

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi carian masa nyata dalam kotak input teks?

Dengan perkembangan Internet, fungsi carian telah menjadi bahagian yang sangat diperlukan dalam reka bentuk web. Carian masa nyata untuk kotak input teks ialah cara yang mesra pengguna untuk memberikan hasil yang berkaitan dengan pantas semasa pengguna menaip, meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi carian masa nyata bagi kotak input teks dan memberikan contoh kod khusus.

Mula-mula, tambahkan kotak input teks dan bekas untuk memaparkan hasil carian dalam fail HTML. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <title>实时搜索</title>
</head>
<body>
  <input type="text" id="search-input" placeholder="请输入关键字">
  <div id="search-results"></div>

<script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Seterusnya, laksanakan fungsi carian masa nyata dalam fail JavaScript. Kodnya adalah seperti berikut:

// 获取文本输入框和搜索结果容器
var input = document.getElementById('search-input');
var resultsContainer = document.getElementById('search-results');

// 监听输入框的输入事件
input.addEventListener('input', function() {
  // 清空搜索结果容器
  resultsContainer.innerHTML = '';

  // 获取输入框的值
  var query = input.value;

  // 进行搜索
  var results = search(query);

  // 展示搜索结果
  showResults(results);
});

function search(query) {
  // 这里可以使用 AJAX 请求后端接口，获取相关搜索结果
  // 在示例中，我们使用一个简单的字符串匹配方式来模拟搜索结果
  var data = ['JavaScript', 'Java', 'Python', 'HTML', 'CSS'];
  var results = [];

  for (var i = 0; i < data.length; i++) {
    if (data[i].toLowerCase().indexOf(query.toLowerCase()) !== -1) {
      results.push(data[i]);
    }
  }

  return results;
}

function showResults(results) {
  // 遍历搜索结果，并在搜索结果容器中展示
  for (var i = 0; i < results.length; i++) {
    var result = document.createElement('div');
    result.textContent = results[i];
    resultsContainer.appendChild(result);
  }
}

Salin selepas log masuk

Analisis kod:

Mula-mula, kami mendapatkan rujukan kepada kotak input teks dan bekas hasil carian melalui kaedah getElementById. getElementById 方法获取文本输入框和搜索结果容器的引用。
接着，通过 addEventListener 方法监听输入框的 input 事件，也就是输入内容发生改变时的事件。
在事件处理函数中，首先清空搜索结果容器，然后通过 input.value 获取输入框的值，并调用 search 函数进行搜索。
search 函数是一个简单的模拟搜索接口，它通过遍历一个存储固定数据的数组，根据输入框的值进行匹配，并返回匹配的结果数组。
最后，showResults

addEventListener

input

Dalam fungsi pengendalian acara, kosongkan dahulu bekas hasil carian, kemudian dapatkan nilai kotak input melalui input.value dan panggil fungsi search untuk mencari. Fungsi

search ialah antara muka carian simulasi mudah Ia merentasi tatasusunan yang menyimpan data tetap, sepadan mengikut nilai kotak input dan mengembalikan tatasusunan hasil yang sepadan.

Akhir sekali, fungsi showResults merentasi tatasusunan hasil carian dan mencipta serta memaparkan hasil carian secara dinamik dalam bekas hasil carian. 🎜🎜🎜Melalui kod di atas, kami telah melaksanakan fungsi carian masa nyata yang mudah dalam kotak input teks. Apabila pengguna memasukkan kandungan dalam kotak input, halaman akan memaparkan hasil carian yang berkaitan dengan cepat. Anda boleh mengoptimumkan dan menyesuaikan logik carian mengikut keperluan sebenar, seperti menggunakan AJAX untuk meminta antara muka bahagian belakang untuk mendapatkan data sebenar, atau melaksanakan algoritma carian yang lebih kompleks. 🎜🎜Ringkasan: 🎜Artikel ini memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi carian masa nyata kotak input teks dan menyediakan contoh kod khusus. Melalui fungsi carian masa nyata ini, pengalaman pengguna boleh dipertingkatkan, membolehkan pengguna mendapatkan hasil carian yang relevan dengan cepat apabila menaip kandungan. Saya harap artikel ini akan membantu anda semasa membangunkan fungsi carian untuk halaman web. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi carian masa nyata dalam kotak input teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!