Detailed explanation of jQuery implementation of keyboard enter search function

This article mainly introduces jquery to implement keyboard enter search function. The front-end code and search button implementation code are posted for everyone. Friends who need it can refer to it. I hope it can help everyone.

Originally, I always thought that there was nothing too difficult to do in a search. It wasn’t until I received the last project, which allowed me to search without using buttons, that I started to look for this technology on the Internet. So, without further ado, I'll post my source code for everyone's reference.

Front desk code

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

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

The following is the highlight of this time, the keyboard press Enter to realize the search

$('#sousuo').bind('keypress', function (event) { 
   if (event.keyCode == "13") { 
    $("#btnSubmit").click();
   }
  })

Perhaps you can find that it is actually equivalent to pressing the Enter keyevent .keyCode == "13", which means the 13th key code of the keyboard. With this help, if you want to implement other keys in the future, you only need to query the corresponding key code of the keyboard.

Summary

Related recommendations:

Example analysis of input, submit, button and carriage return Differences in key submission data

Compare the difference between carriage return and line feed

jquery There are two keypresses in the same file, two when pressing enter All triggered

The above is the detailed content of Detailed explanation of jQuery implementation of keyboard enter search function. For more information, please follow other related articles on the PHP Chinese website!