How to fire click on a button if the user type in an input box

Question

Pre-story: I am using Algolia search to search on my website.If the user start typing in the input field the results will start appearing on the screen.

End goal: close the filters (toggle functionality) by default.

Issues: when the user start typing in the input the url change and the filters stay open.

If I apply the code in the console after the user finishes with typing I can see the button being close.
If I apply the jQuery codes bellow and while I am typing the filters stay closed, but again once the user stops typing the filters open again.
Once I finish with typing (input looses focus) the filters open again.

My approach:

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.

Can you please help?

`.click();` only triggers other event listeners you've added with `.click`, it won't simulate a native button press for security reasons (you could submit forms without the user knowing). — Sergiu Paraschiv, Apr 28 '16 at 14:51
@Sergiu Paraschiv the click event works fine as it is targeting the "button.button.filters__button" the problem I face here is that while I type it hides but once I stop it shows again. If I click somewhere else the click function is trigered again — John, Apr 28 '16 at 14:53
You need to show us some relevant code. The one doing the showing and hiding of "filters". — Sergiu Paraschiv, Apr 28 '16 at 14:54
Are you using [instantsearch.js](https://community.algolia.com/instantsearch.js/) ? — Jerska, Apr 29 '16 at 09:11

izsl · Answer 1 · 2016-04-28T15:12:27.503

0

Try this:

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

edited Apr 28 '16 at 15:12

answered Apr 28 '16 at 14:56

izsl

71
5

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

Try this

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

For your stop typing problem try this answer: Run javascript function when user finishes typing instead of on key up?

edited May 23 '17 at 12:31

Community

1
1

answered Apr 28 '16 at 14:59

Adrian P.

5,060
2
46
47

score 0 · Answer 3 · answered Apr 28 '16 at 15:06

You can use trigger to 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

Mohammed Elhag · Answer 4 · 2016-04-28T15:58:30.030

type in first input , that will click the button immediately then fire function to change the second input value

<!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>

How to fire click on a button if the user type in an input box

4 Answers4