Home > Article > Web Front-end > 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('show.bs.popover', function () { $(this).addClass("popover_open"); }).on('hide.bs.popover', 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 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!