Find keywords using input box in jquery

Below I will share with you an example code for finding keywords and brightening the color in a jquery input box. It has a good reference value and I hope it will be helpful to everyone.

The example code is as follows:

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

Note:

1. Not applicable to button, a, img, etc. can be used

2. show.bs.popover: This event is triggered immediately when the show instance method is called.

shown.bs.popover: This event is triggered when the popup box pops up completely (will wait for the CSS transition effect to complete).

hide.bs.popover: This event is triggered immediately when the hide instance method is called.

hidden.bs.popover: This event is triggered when the tooltip is completely hidden (will wait for the CSS transition effect to complete).

3. Introduce jquery and bootstrap header files

4. Cancel bubbling

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to solve the problem of being unable to dynamically modify the jqgrid component url address in vue

How to achieve something similar in vue Taobao star rating

How to implement star rating component development in vue-star

Comparison of map, set, array and object in ES6 (Detailed tutorial)

The above is the detailed content of Find keywords using input box in jquery. For more information, please follow other related articles on the PHP Chinese website!