logo标签列表

如何在用户输入框中输入内容后，触发按钮点击事件

javascriptjqueryhtmlshow-hidealgolia
5

前言: 我正在使用Algolia搜索在我的网站上进行搜索。如果用户在输入字段中开始输入，结果将开始出现在屏幕上。

最终目标: 默认情况下关闭筛选器（切换功能）。

问题: 当用户开始在输入框中输入时，URL会更改，而筛选器仍然保持打开状态。

  • 如果我在用户完成输入后在控制台中应用代码，我可以看到按钮被关闭。
  • 如果我应用以下jQuery代码，并在输入时保持筛选器关闭状态，但是一旦用户停止输入，筛选器就再次打开。
  • 一旦我完成输入（输入失去焦点），筛选器就会再次打开。

我的方法：

  • First

    $("input#dropdown_search").on('input',function(e){
    $("b- utton.button.filters__button").click();     
});

  • Second

    $('input#dropdown_search').keyup(function() {
    $("button.button.filters__button").click();
});

  • Third

    $('input#dropdown_search').on('inputchange', function() { 
    $("button.button.filters__button").click();
});

  • Fourth

    $("input#dropdown_search").on('change keyup paste', function () {
    ApplyFilter();
});

function ApplyFilter() {
    $("button.button.filters__button").click();
}

    It seems that they don't reach the end goal where they keep the filter hidden even after the user stops typing.

你能帮忙吗？

这是需要翻译的内容。
你能放一些你的代码吗？ - Marcel Kohls
.click(); 只会触发你使用 .click 添加的其他事件监听器，出于安全考虑它不会模拟原生按钮按下（否则用户可能在不知情的情况下提交表单）。 - Sergiu Paraschiv
@Sergiu Paraschiv 点击事件正常工作，因为它针对的是“button.button.filters__button”，我在这里面遇到的问题是，当我输入时，它会隐藏，但一旦我停止输入，它又会显示出来。如果我在其他地方单击，点击函数会再次触发。 - John
@Marcel 我想这样做，但它在我的本地机器上。 - John
您需要向我们展示一些相关的代码。做展示和隐藏“筛选器”的人。 - Sergiu Paraschiv
你正在使用 instantsearch.js 吗？ - Jerska
4个回答
0
在第一个输入框中输入，这将立即点击按钮，然后触发更改第二个输入框值的函数。 

 
   
  
<!DOCTYPE html>
<html>
<head>
</head>
<body>

 <input type=text id=dropdown_search>
  <input type=text id=dropdown_search2>

  <button id=target onclick="be()">

<script> 
  
     onload = function () {

       var t = document.getElementById('dropdown_search');
       t.oninput = function (){
       
         document.getElementById("target").click();
         
         };
       t.onpropertychange = t.oninput; // for IE8
       t.onchange = t.oninput;

       };

function be() {
var t = document.getElementById('dropdown_search').value;
document.getElementById('dropdown_search2').value=t;}
  </script>
   
  </body></html>

0

试试这个：

var timer;
$("input#dropdown_search").on('change keyup', function () {
    clearInterval(timer);
    timer = setInterval(function() {
        ApplyFilter();
    }, 1500);
});
0
0
你可以使用 trigger 触发 click。
$("#dropdown_search").on('change keyup paste',function(event){
 $(".buttonclass").trigger('click'); //trigger .buttonclass button on trigger of events
})
$(".buttonclass").on('click',function(event){
alert("I am clicked")
})

示例 jsFiddle

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接