>웹 프론트엔드 >JS 튜토리얼 >키보드 입력 검색 기능의 jQuery 구현에 대한 자세한 설명

키보드 입력 검색 기능의 jQuery 구현에 대한 자세한 설명

小云云
小云云원래의
2017-12-31 16:01:462419검색

이 글은 키보드 입력 검색 기능을 구현하기 위한 jquery를 주로 소개합니다. 프론트엔드 코드와 검색 버튼 구현 코드는 모두가 참고할 수 있도록 게시되어 있습니다.

원래 검색을 하면 별로 어려운 일이 없다고 생각했는데, 버튼을 사용하지 않고 검색을 구현하는 마지막 프로젝트를 받고서야 인터넷에서 이 기술을 찾기 시작했습니다. , 참고용으로 여기에 게시된 소스 코드를 공유하겠습니다. front-End Codeont

<p class="fl search-box"> 
     <button type="button" name="btnSubmit" id="btnSubmit" class="btnSubmit">搜索</button>
     <input id="sousuo" name="sousuo" type="search" placeholder="输入搜索内容" value="">
</p>

search 버튼 구현


R

$(function () {
   $("body").on("click", "#btnSubmit", function () {
    var sousuo = $("#sousuo").val();
    if (sousuo == "") { alert("请输入信息"); return false; }
    location.href = "{$:CSSiteUrl}search.html?keywords=" + escape(sousuo);
   });
  });

이 시간의 하이라이트, 키보드를 누르기위한 키보드를 누르십시오. Enter 키

는 키보드의 13번째 키 코드와 실제로 동일합니다. 이 도움말을 사용하면 나중에 다른 키를 구현하려면 키보드에서 해당 키 코드를 쿼리하면 됩니다.

요약

관련 권장사항:


데이터 제출을 위한 입력, 제출, 버튼 및 Enter 키의 차이점 분석 예시event.keyCode == “13”

Enter와 줄 바꿈의 차이점 비교

jquery 같은 파일에서 두 번의 키 누르기가 있으며 둘 다 Enter를 누르면 트리거됩니다


위 내용은 키보드 입력 검색 기능의 jQuery 구현에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.