Question

我有一个搜索字段，用于收集查询并使用AJAX请求执行搜索。我无法找到用于执行搜索的完美javascript事件。

oninput 使用oninput，AJAX请求被多次触发，对于输入字段中的每个字符一次。因此，搜索'123'将执行三个AJAX请求：

'1'
'12'
'123'

平变化 使用onchange更有效，因为它只触发一个AJAX请求，但它强制用户从搜索字段更改焦点以便触发。

我是否可以使用javascript事件来充分利用这两个世界？我在搜索时使用1.5秒的超时延迟，以便为用户提供足够的时间来输入搜索查询。理想情况下，我想使用像 oninput 这样的JS事件，不需要字段失去焦点就会触发，但只对整个值触发一次，而不是对输入字段中的每个字符触发一次。

也许答案是使用 onchange 事件并在1.5秒后自动失去焦点？这看起来很糟糕，并且还引入了一个可用性问题，如果用户想要更改搜索查询，他们需要再次将焦点设置在搜索字段上。

Answer 1

这就是你如何做到这一点，去除input事件：

$('input[type=search]').on('input', function(){
   clearTimeout(this.delay);
   this.delay = setTimeout(function(){
      console.log(this.value);
      /* call ajax request here */
   }.bind(this), 800);
});

为了更好的UIX，你也应该绑定search事件：

$('input[type=search]').on('search', function(){
   if(this.value){
     /* call ajax request here */
   }
});

请参阅-DEMO-

Answer 2

当用户点击回车时，我建议您拨打电话。在你写完这个单词后点击输入似乎很自然。

当用户在向searchBox输入一些数据后点击Enter时，该代码运行doYourStuff（）。

function delete_cat($category){
    $stmt = $mysqli->prepare("DELETE category, products FROM category INNER JOIN products WHERE category.id = ? AND product_cat = category.category_name ");
    $stmt->bind_param($category);
    $stmt->execute();
    $result = $stmt->affected_rows;
    $stmt->close();
   return $result;
}

如果你不喜欢这个解决方案，当用户点击按钮时，你总是可以添加一个带有一些花哨的搜索图标和跑步电话的小按钮。

用于搜索输入的事件

2 个答案: