Question

我是卡尔，我在这个地方还是新手，而且在编码时我是新手。请多多包涵。我更喜欢HTML和CSS。我最近发现基于AJAX，JQuery和JSON的this Live Search tutorial，其中搜索功能从您开始在输入字段中输入的那一刻起立即作出反应。 keyup（）命令似乎与此有关。

$('#search').keyup(function(){
 var searchField = $('#search').val();
 var myExp = new RegExp(searchField, 'i');
 $.getJSON('data.json', function(data){
  var output = '<ul class="searchresult">';
  $.each(data, function(key, val){
   if((val.name.search(myExp) != -1) || (val.bio.search(myExp) != -1)) {
(...)

我目前正在本地服务器上测试此实时搜索。（就像魅力一样。）

我想知道是否可以通过输入键（传统方式）和/或通过搜索/提交按钮提交用户定义的查询/搜索词。我尝试用submit替换 keyup 函数。比如this video上的内容。我试图应用这种提交，这在前面提到的视频中提到过，但我没有让它相应地工作。我甚至通过Google，Youtube，DailyMotion等上的许多不同视频搜索了各种教程，甚至在stackoverflow和其他类似网站上比较了很多问题。我很可能错过了树林。

非常感谢任何帮助。提前谢谢。

Answer 1

要检测是否使用了输入按钮，您应该测试事件参数＆＃34;其中＆＃34;代码13（一些代码示例：Submitting a form on 'Enter' with jQuery?）。

您还应该收听字段的模糊事件。（http://www.w3schools.com/jsref/event_onblur.asp）

最后一件事：为了通过提交按钮提交，您应该听取该按钮的点击按钮。（http://api.jquery.com/on/）

Answer 2

您可以将搜索框放在表单中，因此当用户点击“输入”按钮时，它将提交...并停止正常的提交方法并使用Ajax发送查询参数。

function ajaxSubmit(event){
  event.preventDefault();
  
  alert('submit stopped');
  
  //ajax code here
  

};

<form action="" method="post" onSubmit="ajaxSubmit(event)">
  
  <label for="search">Search box:</label><br>
  <input type="search" placeholder="Write here and press enter" id="search">
  
</form>

提交搜索词而不是实时搜索（键盘功能）

2 个答案: