Suchen Sie nach Schlüsselwörtern mithilfe des Eingabefelds in jquery

Im Folgenden werde ich Ihnen einen Beispielcode zum Auffinden von Schlüsselwörtern und zum Aufhellen der Farbe in einem JQuery-Eingabefeld mitteilen. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Der Beispielcode lautet wie folgt:

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

Hinweis:

1. Gilt nicht für Schaltflächen, a, img usw. sind verfügbar

2. show.bs.popover: Dieses Ereignis wird sofort ausgelöst, wenn die Show-Instanzmethode aufgerufen wird.

shown.bs.popover: Dieses Ereignis wird ausgelöst, wenn das Popover-Paar vollständig angezeigt wird (wartet, bis der CSS-Übergangseffekt abgeschlossen ist).

hide.bs.popover: Dieses Ereignis wird sofort ausgelöst, wenn die Methode zum Ausblenden der Instanz aufgerufen wird.

hidden.bs.popover: Dieses Ereignis wird ausgelöst, wenn der Tooltip vollständig ausgeblendet ist (wartet, bis der CSS-Übergangseffekt abgeschlossen ist).

3. Einführung von Jquery- und Bootstrap-Header-Dateien

4. Abbrechen des Sprudelns

Ich hoffe, dass es in Zukunft für alle hilfreich sein wird .

Verwandte Artikel:

So lösen Sie das Problem, dass die URL-Adresse der jqgrid-Komponente in Vue nicht dynamisch geändert werden kann

Anleitung Erzielen Sie etwas Ähnliches in der Sternebewertung von Vue Taobao

So implementieren Sie die Entwicklung von Sternebewertungskomponenten in Vue-Star

Vergleich von Karte, Satz, Array und Objekt in ES6 (Detailliertes Tutorial)

Das obige ist der detaillierte Inhalt vonSuchen Sie nach Schlüsselwörtern mithilfe des Eingabefelds in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!