jquery는 입력 상자에서 키워드를 찾아 강조 표시합니다.

이번에는 입력 상자에서 키워드를 검색하고 강조 표시할 수 있는 jquery를 가져왔습니다. jquery가 입력 상자에서 키워드를 찾아 강조 표시할 수 있는 notes가 무엇인지 살펴보겠습니다.

예제 코드는 다음과 같습니다.

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

참고:

1. 버튼 적용 불가, a, img 등 가능

2. show.bs.popover: 이 이벤트는 show 인스턴스 메소드가 호출될 때 즉시 트리거됩니다.

표시.bs.popover: 이 이벤트는 팝오버 상자가 완전히 팝업될 때 트리거됩니다(CSS 전환 효과가 완료될 때까지 기다립니다).

hide.bs.popover: 이 이벤트는 hide 인스턴스 메소드가 호출될 때 즉시 트리거됩니다.

Hidden.bs.popover: 이 이벤트는 Tooltip이 완전히 숨겨져 있을 때 트리거됩니다(CSS 전환 효과가 완료될 때까지 기다립니다).

3. jquery 및 bootstrap헤더 파일

을 소개합니다. 4. 버블링 취소

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

jquery.picsign 구성 요소 사용에 대한 자세한 설명

jQuery 하위 요소에 값을 추가하는 단계에 대한 자세한 설명

JS는 무제한 로딩 및 페이징 기능을 구현합니다. 모바일 쪽에서

위 내용은 jquery는 입력 상자에서 키워드를 찾아 강조 표시합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!