html搜尋框怎麼弄-前端問答-PHP中文網

HTML搜尋框怎麼弄？教你快速實現

現代網站離不開搜尋功能，它已經成為網站的基本要素之一。當使用者需要尋找一些特定的資訊時，尤其是當網站內容龐大時，這時候搜尋功能，顯得特別重要。在HTML中，實作搜尋框並不需要太多的程式碼和技巧，只需要遵循一定的規範，即可方便實現。

本文將詳細介紹HTML搜尋框的實作方法，以及一些實用的技巧，讓你能夠快速地加入搜尋功能到你的網站中去。

建立一個HTML搜尋框的基本結構

要建立一個搜尋框，首先我們需要使用HTML來定義搜尋框的基本結構。在搜尋框中，我們一般會使用元素，該元素有多種類型。我們在這裡就使用type="text"類型，來定義一個文字輸入框，如下所示：

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

登入後複製

在這個HTML程式碼片段中，我們建立了一個

元素，定義了一個文字輸入框，同時使用了placeholder屬性來提供輸入框提示訊息。 Note：placeholder屬性是HTML5新屬性，這個屬性可以在文字方塊中輸入提示訊息，它會在使用者輸入文字方塊後消失。

新增提交按鈕

在建立搜尋功能時，我們還需要一個提交按鈕。當使用者輸入文字後，需要用滑鼠或鍵盤回車來提交搜尋請求。對於提交按鈕，我們同樣使用元素，類型為"submit"，如下所示：

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

登入後複製

在這段HTML程式碼中，我們新增了一個

實作搜尋功能

上面我們定義了搜尋框的基本結構和樣式，接下來要實作搜尋功能。最簡單的方法是使用HTML的action屬性，將搜尋表單的請求傳遞給伺服器進行處理。例如，下面的程式碼會將搜尋表單的請求提交給「search.php」頁面進行處理。

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

登入後複製

不過，如果你還沒有伺服器或還沒寫伺服器端程式碼，那麼可以在HTML中使用JavaScript實作搜尋功能。我們使用JavaScript來監聽提交按鈕的點擊事件，同時取得輸入框中的文字資訊。具體操作如下：

<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>

登入後複製

在這個範例中，我們先為元素加入了一個id屬性，以便在JavaScript程式碼中能夠方便地取得該元素的參考。然後，我們定義了一個名為「search」的JavaScript函數，該函數被提交按鈕的onclick事件呼叫。在「search」函數中，我們透過document.getElementById取得輸入框的引用，取得輸入框中所輸入的搜尋關鍵字，最後使用alert函數來顯示正在搜尋的關鍵字。在alert函數後面，我們可以寫自己的搜尋程式碼。

實作自動提示功能

搜尋框中的自動提示功能，可以讓使用者在輸入關鍵字時，自動彈出相關的搜尋建議。這個功能非常有用，它可以幫助使用者更快找到自己想要的資訊。在HTML中實作搜尋框的自動提示功能，可以使用JavaScript來實作。例如，我們可以綁定輸入框的onkeyup事件，在每次輸入框中輸入字元時，給使用者自動彈出相關的搜尋建議。

<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>

登入後複製

在上面的程式碼中，我們定義了一個名為「showHint」的函數，使用XMLHttpRequest物件向後台發送一個get請求，來取得與關鍵字相關的搜尋建議。當取得搜尋建議後，我們將它們顯示在已定義的id為「hintBox」的HTML元素中。

新增樣式

最後，我們可以透過CSS樣式來美化搜尋框的外觀。例如，可以透過設定背景顏色、外邊框、內邊距等方式來實現搜尋框的風格統一，程式碼如下：

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;
}

登入後複製

在上面的程式碼中，我們設定了輸入框的內邊距、外邊框、圓角等樣式，使其外觀更加美觀。同時，我們也定義了一個:focus偽類，當輸入框獲得焦點時，會改變邊框樣式與盒子渲染的關係建立起連結。在提交按鈕的樣式中，我們設定了滑鼠懸停時樣式的變化。

總結

透過本篇文章的介紹，我們你學習如何使用HTML和JavaScript來建立搜尋框，並掌握了一些常見的技巧，如自動提示功能及美化樣式等。搜尋框的實作原理也就是超連結的實作原理，最簡單的實作方式是利用HTML表單元素的提交功能，將表單資料傳送到伺服器處理。當然了，我們在前端也可以利用JavaScript鉤子攔截資料進行局部處理，往往會更快、更安全、更好地實現業務需求，掌握好這些技巧後，相信你的網頁就會更加豐富多彩。

以上是html搜尋框怎麼弄的詳細內容。更多資訊請關注PHP中文網其他相關文章！