JavaScript melaksanakan carian Baidu-Soal Jawab bahagian hadapan-php.cn

JavaScript melaksanakan carian Baidu

王林

Lepaskan： 2023-05-26 20:16:06

asal

1670 orang telah melayarinya

JavaScript ialah bahasa pengaturcaraan peringkat tinggi yang ditafsirkan digunakan secara meluas dalam pembangunan web. Antaranya, JavaScript boleh menjadikan halaman web mempunyai kesan dinamik, interaktiviti dan fungsi logik. Carian Baidu ialah salah satu fungsi biasa tapak web Artikel ini akan memperkenalkan cara melaksanakan carian Baidu melalui JavaScript.

Struktur HTML

Pertama, anda perlu mencipta komponen seperti kotak carian dan butang hantar dalam fail HTML. Di sini kita mengambil kotak carian di halaman utama Baidu sebagai contoh:

<form id="search-form" action="http://www.baidu.com/s" target="_blank">
  <input type="text" id="search-input" name="wd" autocomplete="off" placeholder="请输入关键字">
  <button type="submit" id="search-button">搜索</button>
</form>

Salin selepas log masuk

Dalam kod, form mewakili komponen borang, atribut action menentukan alamat yang diserahkan (di sini ialah alamat carian Baidu) , target menentukan untuk membuka hasil carian dalam tetingkap baharu. id kotak teks ialah search-input dan id butang ialah search-button Kedua-dua ID ini akan digunakan dalam kod JavaScript berikutnya.

JavaScript untuk melaksanakan fungsi carian

Seterusnya, kita perlu menulis kod dalam JavaScript untuk melaksanakan fungsi carian. Tambahkan kod berikut dalam teg script:

var form = document.getElementById('search-form');
var input = document.getElementById('search-input');

form.onsubmit = function(e) {
  e.preventDefault();
  var query = input.value;
  window.location.href = 'http://www.baidu.com/s?wd=' + encodeURIComponent(query);
};

Salin selepas log masuk

Mula-mula, dapatkan kotak carian dan bentuk komponen melalui kaedah document.getElementById. Kemudian, tambahkan fungsi panggil balik pada acara onsubmit komponen borang untuk menghalang kelakuan penyerahan lalai borang. Dalam fungsi panggil balik, dapatkan nilai teks dalam kotak carian, gunakan atribut window.location.href untuk ubah hala dan sambung rentetan pertanyaan ke dalam alamat carian Baidu.

Perlu diambil perhatian bahawa memandangkan rentetan pertanyaan mungkin mengandungi aksara khas, anda perlu menggunakan kaedah encodeURIComponent untuk pengekodan bagi memastikan parameter yang diluluskan dalam URL mematuhi piawaian.

Pengendahan UI

Untuk menjadikan fungsi carian lebih cantik dan mudah digunakan, kami boleh mencantikkan kotak carian dan butang melalui gaya CSS. Anda boleh menambah kod berikut:

#search-form {
  display: inline-block;
  padding: 10px;
  background-color: #f1f1f1;
  border-radius: 5px;
  box-shadow: 0 1px 2px #ccc;
  font-size: 14px;
}

#search-input {
  width: 300px;
  height: 30px;
  padding: 5px;
  border: none;
  border-radius: 5px;
  outline: none;
  font-size: 16px;
}

#search-button {
  width: 80px;
  height: 40px;
  margin-left: 5px;
  background-color: #3385ff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
}

#search-button:hover {
  background-color: #2366d1;
}

Salin selepas log masuk

Dalam kod, kami telah menambah gaya untuk kotak carian dan butang masing-masing, termasuk atribut seperti warna latar belakang, jidar, sudut bulat, bayang, saiz fon, dsb. Selain itu, butang menukar warna pada tetikus, menambah interaktiviti.

Merealisasikan penyiapan automatik

Selain fungsi carian asas, kami juga boleh melaksanakan penyiapan automatik kata kunci pertanyaan melalui JavaScript. Selepas pengguna memasukkan beberapa huruf, kata kunci carian yang sepadan akan dipaparkan berdasarkan kandungan yang dimasukkan.

Kami boleh menggunakan perpustakaan pihak ketiga jquery-ui untuk merealisasikan fungsi penyiapan input automatik. Penyelenggaraan kod juga akan menjadi lebih mudah.

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  <!--...-->
  <script>
    $(function() {
      $("#search-input").autocomplete({
        source: function(request, response) {
          $.ajax({
            url: "http://www.baidu.com/sugrec",
            dataType: "jsonp",
            data: {
              wd: request.term
            },
            success: function(data) {
              var results = [];
              if (data.g && data.g.length) {
                $.each(data.g, function(i, val) {
                  results.push({
                    label: val.q,
                    value: val.q
                  });
                });
              }
              response(results);
            }
          });
        },
        minLength: 1,
        delay: 150
      });
    });
  </script>
</body>

Salin selepas log masuk

Kami meminjam antara muka yang disediakan oleh Baidu untuk menggesa kata kunci. Didapati bahawa id kotak input menggunakan fungsi autolengkap rangka kerja jqueryUI untuk melaksanakan perkaitan kata kunci. Antaranya, source menetapkan alamat antara muka, dataType menetapkan jenis data respons dan data menetapkan parameter permintaan. Kaedah pemprosesan data yang dikembalikan disimpan dalam success, kata kunci ditapis dan ditetapkan ke dalam tatasusunan results dan akhirnya dikembalikan kepada response. minLengthTetapkan bilangan minimum aksara yang diperlukan untuk menanyakan perkataan gesaan, delayTetapkan masa tunda permintaan pertanyaan.

Ringkasan

Artikel ini mengambil carian Baidu sebagai contoh untuk memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi carian asas dan fungsi autolengkap. Sudah tentu, ini hanyalah pelaksanaan mudah yang melaksanakan carian Baidu lebih daripada dua fungsi di atas, tetapi juga cadangan popular, carian berkaitan dan fungsi lain, yang memerlukan pembelajaran berterusan dan peningkatan dalam amalan. Pada masa yang sama, fungsi carian yang lebih berkuasa boleh dicapai dengan menggabungkan teknologi dan rangka kerja bahagian hadapan yang lain.

Atas ialah kandungan terperinci JavaScript melaksanakan carian Baidu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!