Rechercher des mots-clés en utilisant la zone de saisie dans jquery

Ci-dessous, je vais partager avec vous un exemple de code pour rechercher des mots-clés et éclaircir la couleur dans une zone de saisie jquery. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

L'exemple de code est le suivant :

<p>
  <a class="btn btn-success show" title="Popover title"
     data-container="body" data-toggle="popover" data-placement="bottom"
     data-content="底部的 Popover 中的一些内容"> aaaa </a>
</p>
<script>
  $(function () {
    initPopover();
  })
  function initPopover() {
    $(".show").popover({
      container: "body",
      trigger: " manual"  //手动触发
    }).on(&#39;show.bs.popover&#39;, function () {
      $(this).addClass("popover_open");
    }).on(&#39;hide.bs.popover&#39;, function () {
      $(this).removeClass("popover_open");
    });
    $(".show").click(function () {
      if ($(this).hasClass("popover_open")) {
        $(this).popover("hide")
      } else {
        $(".popover_open").popover("hide");
        $(this).popover("show");
      }
      var e = arguments.callee.caller.arguments[0] || event;
      e.stopPropagation();
    });
    $(document).click(function () {
      $(".show").popover("hide");
    });
  }
</script>

Remarque :

1. Non applicable aux boutons, a, img, etc. sont disponibles

2 show.bs.popover : cet événement est déclenché immédiatement lorsque la méthode d'instance show est appelée.

shown.bs.popover : cet événement est déclenché lorsque la paire de popovers apparaît complètement (il attendra que l'effet de transition CSS soit terminé).

hide.bs.popover : Cet événement est déclenché immédiatement lorsque la méthode d'instance hide est appelée.

hidden.bs.popover : Cet événement est déclenché lorsque l'info-bulle est complètement masquée (attendra la fin de l'effet de transition CSS).

3. Introduisez les fichiers d'en-tête jquery et bootstrap

4. Annuler le bouillonnement

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir. .

Articles associés :

Comment résoudre le problème de l'impossibilité de modifier dynamiquement l'adresse URL du composant jqgrid dans vue

Comment obtenir quelque chose de similaire dans le classement par étoiles de vue Taobao

Comment implémenter le développement de composants de classement par étoiles dans vue-star

Comparaison de la carte, de l'ensemble et du tableau et objet dans ES6 (Tutoriel détaillé)

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!