Comment obtenir la barre de recherche bootstrap

Comment utiliser Bootstrap pour obtenir la valeur de la barre de recherche: déterminez l'ID ou le nom de la barre de recherche. Utilisez JavaScript pour obtenir des éléments DOM. Obtient la valeur de l'élément. Effectuer les actions requises.

Comment utiliser Bootstrap pour obtenir la valeur de la barre de recherche

Bootstrap fournit un composant de barre de recherche simple qui permet d'accéder à la saisie de l'utilisateur via sa classe .form-control . Pour obtenir la valeur de la barre de recherche, vous pouvez utiliser les étapes suivantes:

1. Déterminez l'ID ou le nom de la barre de recherche

Le HTML du composant de la barre de recherche est généralement le suivant:

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

2. Utilisez JavaScript pour obtenir des éléments DOM

Vous pouvez utiliser document.getElementById() ou document.querySelector() pour obtenir l'élément DOM comme suit:

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

3. Obtenez la valeur de l'élément

Utilisez value pour obtenir la valeur d'entrée dans la barre de recherche:

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

4. Effectuez les actions requises

Après avoir obtenu la valeur de recherche, vous pouvez effectuer toute action dont vous avez besoin, comme faire une demande AJAX ou mettre à jour le contenu de la page:

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

Exemple de code

Voici un exemple complet de la façon d'utiliser Bootstrap pour obtenir la valeur de la barre de recherche:

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!