Bagaimana untuk membuat kotak carian html

2. Tambah butang hantar

Apabila mencipta fungsi carian, kami juga memerlukan butang hantar. Selepas pengguna memasukkan teks, dia perlu menggunakan tetikus atau papan kekunci untuk memasukkan dan menyerahkan permintaan carian. Untuk butang hantar, kami juga menggunakan elemen dengan jenis "serahkan", seperti yang ditunjukkan di bawah:

<form>
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

Dalam kod HTML ini, kami menambah

3. Melaksanakan fungsi carian

Di atas kita telah mentakrifkan struktur asas dan gaya kotak carian, dan seterusnya kita perlu melaksanakan fungsi carian. Kaedah paling mudah ialah menggunakan atribut tindakan HTML untuk menghantar permintaan borang carian kepada pelayan untuk diproses. Sebagai contoh, kod berikut akan menyerahkan permintaan borang carian ke halaman "search.php" untuk diproses.

<form action="search.php">
  <input type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索">
</form>

Walau bagaimanapun, jika anda belum mempunyai pelayan lagi atau belum menulis kod sisi pelayan, anda boleh menggunakan JavaScript dalam HTML untuk melaksanakan fungsi carian. Kami menggunakan JavaScript untuk mendengar peristiwa klik butang hantar dan mendapatkan maklumat teks dalam kotak input. Operasi khusus adalah seperti berikut:

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入">
  <input type="submit" value="搜索" onclick="search()">
</form>

<script>
function search() {
  var keyword = document.getElementById("searchBox").value;
  alert("正在搜索：" + keyword);
  // 实现搜索功能
}
</script>

Dalam contoh ini, kami mula-mula menambah atribut id pada elemen supaya rujukan kepada elemen boleh diperoleh dengan mudah dalam kod JavaScript. Kami kemudian mentakrifkan fungsi JavaScript yang dipanggil "carian" yang dipanggil oleh acara onclick butang hantar. Dalam fungsi "carian", kami mendapatkan rujukan kepada kotak input melalui document.getElementById, dapatkan kata kunci carian yang dimasukkan dalam kotak input, dan akhirnya menggunakan fungsi amaran untuk memaparkan kata kunci yang sedang dicari. Di sebalik fungsi amaran, kita boleh menulis kod carian kita sendiri.

4. Laksanakan fungsi gesaan automatik

Fungsi gesaan automatik dalam kotak carian membolehkan pengguna muncul secara automatik cadangan carian yang berkaitan apabila memasukkan kata kunci. Ciri ini sangat berguna kerana ia membantu pengguna mencari maklumat yang mereka inginkan dengan lebih cepat. Untuk melaksanakan fungsi gesaan automatik kotak carian dalam HTML, anda boleh menggunakan JavaScript untuk melaksanakannya. Sebagai contoh, kita boleh mengikat acara onkeyup kotak input, dan cadangan carian yang berkaitan akan muncul secara automatik untuk pengguna setiap kali aksara dimasukkan dalam kotak input.

<form>
  <input id="searchBox" type="text" placeholder="请在这里输入" onkeyup="showHint()">
  <input type="submit" value="搜索">
</form>

<script>
function showHint() {
  var keyword = document.getElementById("searchBox").value;
  var xmlhttp;
  if (keyword.length==0) { 
    document.getElementById("hintBox").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("hintBox").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","gethint.php?q="+keyword,true);
  xmlhttp.send();
}
</script>

Dalam kod di atas, kami mentakrifkan fungsi bernama "showHint", yang menggunakan objek XMLHttpRequest untuk menghantar permintaan get ke latar belakang untuk mendapatkan cadangan carian berkaitan kata kunci. Apabila cadangan carian diperoleh, kami memaparkannya dalam elemen HTML yang ditentukan dengan id "hintBox".

5. Tambah gaya

Akhir sekali, kami boleh mencantikkan rupa kotak carian melalui gaya CSS. Sebagai contoh, gaya kotak carian boleh disatukan dengan menetapkan warna latar belakang, sempadan luar, jidar dalam, dsb. Kod adalah seperti berikut:

input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  outline: none;
}
input[type="text"]:focus {
  border-color: #369;
  box-shadow: 0 0 5px #369;
}
input[type="submit"] {
  background-color: #369;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin-left: -5px;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #258;
}

Dalam kod di atas, kami menetapkan margin dalam kotak input, sempadan luar, sudut bulat dan gaya lain menjadikannya kelihatan lebih cantik. Pada masa yang sama, kami juga mentakrifkan kelas pseudo :fokus Apabila kotak input memperoleh fokus, gaya sempadan akan ditukar untuk mewujudkan hubungan dengan pemaparan kotak. Dalam gaya butang hantar, kami menetapkan perubahan gaya apabila tetikus dilegar.

Ringkasan

Melalui pengenalan artikel ini, kami telah mempelajari cara menggunakan HTML dan JavaScript untuk mencipta kotak carian, dan menguasai beberapa teknik biasa, seperti fungsi autocadangan dan gaya pengindahan , dsb. Prinsip pelaksanaan kotak carian juga merupakan prinsip pelaksanaan hiperpautan Kaedah pelaksanaan yang paling mudah ialah menggunakan fungsi penyerahan elemen borang HTML untuk menghantar data borang ke pelayan untuk diproses. Sudah tentu, kami juga boleh menggunakan cangkuk JavaScript untuk memintas data untuk pemprosesan separa di bahagian hadapan, yang selalunya akan menjadi lebih pantas, lebih selamat dan lebih memenuhi keperluan perniagaan Selepas menguasai kemahiran ini, saya percaya halaman web anda akan menjadi lebih berwarna.

Atas ialah kandungan terperinci Bagaimana untuk membuat kotak carian html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!