bootstrap搜索欄怎麼獲取

如何使用Bootstrap 獲取搜索欄的值：確定搜索欄的ID 或名稱。使用JavaScript 獲取DOM 元素。獲取元素的值。執行所需的操作。

如何使用Bootstrap 獲取搜索欄的值

Bootstrap 提供了一個簡單的搜索欄組件，可通過其.form-control類訪問用戶輸入。要獲取搜索欄的值，可以使用以下步驟：

1. 確定搜索欄的ID 或名稱

搜索欄組件的HTML 通常如下所示：

 <code class="html"><div class="form-group"> <input type="text" class="form-control" id="search-input" placeholder="搜索"> </div></code>

2. 使用JavaScript 獲取DOM 元素

可以使用document.getElementById()或document.querySelector()方法獲取DOM 元素，如下所示：

 <code class="javascript">const searchInput = document.getElementById("search-input");</code>

3. 獲取元素的值

使用value屬性可以獲取搜索欄中的輸入值：

 <code class="javascript">const searchValue = searchInput.value;</code>

4. 執行所需操作

獲取搜索值後，可以執行所需的任何操作，例如進行AJAX 請求或更新頁面內容：

 <code class="javascript">console.log(searchValue);</code>

示例代碼

以下是一個完整的示例，演示如何使用Bootstrap 獲取搜索欄的值：

 <code class="html"><div class="form-group"> <input type="text" class="form-control" id="search-input" placeholder="搜索"> </div> <script> const searchInput = document.getElementById("search-input"); searchInput.addEventListener("input", () => { const searchValue = searchInput.value; console.log(searchValue); }); </script></code>

以上是bootstrap搜索欄怎麼獲取的詳細內容。更多資訊請關注PHP中文網其他相關文章！