如果用户在输入框中键入,如何触发单击按钮

时间:2016-04-28 14:38:17

标签: javascript jquery html show-hide algolia

故事前 我正在使用Algolia搜索在我的网站上搜索。如果用户开始输入输入字段,结果将开始出现在屏幕上。

结束目标:默认关闭过滤器(切换功能)。

问题:当用户开始在输入中输入网址更改并且过滤器保持打开状态时。

  • 如果我在用户完成输入后在控制台中应用代码,我可以看到该按钮已关闭。
  • 如果我在下面应用jQuery代码并且在我输入时过滤器保持关闭状态,但一旦用户再次停止输入过滤器,就会再次打开。
  • 一旦我完成输入(输入失去焦点),过滤器会再次打开。

我的方法:

  • 第一

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

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

    $('input#dropdown_search').on('inputchange', function() { 
        $("button.button.filters__button").click();
    });
    
  • $("input#dropdown_search").on('change keyup paste', function () {
        ApplyFilter();
    });
    
    function ApplyFilter() {
        $("button.button.filters__button").click();
    }
    

    即使在用户停止输入后,他们似乎也没有达到隐藏过滤器的最终目标。

你能帮帮忙吗?

4 个答案:

答案 0 :(得分:0)

试试这个:

var timer;
$("input#dropdown_search").on('change keyup', function () {
    clearInterval(timer);
    timer = setInterval(function() {
        ApplyFilter();
    }, 1500);
});

答案 1 :(得分:0)

试试这个

(function() {
  var x,
    y,
    top,
    left,
    down;

  $("ul").mousedown(function(e) {
    e.preventDefault();
    down = true;
    x = e.pageX;
    y = e.pageY;
    left = $(this).scrollLeft();
    $(this).addClass("grabbing");
  });

  $("ul a").mousedown(function(e) {
    e.preventDefault();
  });

  $("ul").mousemove(function(e) {
    if (down) {
      var newX = e.pageX;
      var newY = e.pageY;
      $("ul").scrollLeft(left - newX + x);
    }
  });

  $("ul").mouseup(function(e) {
    down = false;
    $(this).removeClass("grabbing");
  });
})();

对于您的停止输入问题,请尝试以下答案:Run javascript function when user finishes typing instead of on key up?

答案 2 :(得分: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")
})

Example jsFiddle

答案 3 :(得分: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>
&#13;
&#13;
&#13;