CODEWITHSUNDEEP
javascriptjqueryhtml
sarooleh
sarooleh

Reputation: 23

Enter key function sometimes works and sometimes doesn't

I have a search box which should work with pressing the button and also pressing the Enter key. They both have the same code. The button works perfectly but when it comes to the Enter key, most of the time it doesn't work and sometimes it suddenly works.

Here's my code:

$(document).ready(function() {

  function myFunction() {
    $("#search-criteria").keydown(function(event) {
      if (event.keyCode === 13) {
        var txt = $('#search-criteria').val();
        $('.items:contains("' + txt + '")').addClass('searched');
      }
    });
  }

  $('#search').click(function() {
    var txt = $('#search-criteria').val();
    $('.items:contains("' + txt + '")').addClass('searched');
  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="search-criteria" onkeydown="myFunction()" name="search" placeholder="Search..">
  <input type="button" id="search" value="search" />
</form>

Upvotes: 2

Views: 872

Answers (3)

Jacob
Jacob

Reputation: 78850

You are adding both an onKeyDown attribute to your HTML and attaching an event listener. So what's happening is that when your key down occurs, it's calling myFunction, which attaches a second event handler for keydown. The second time around the enter key behavior might kick in, but because each keydown attaches a new event listener, you might have the logic kick in multiple times.

Choose one approach or the other. Either use the HTML attribute or add the event listener programmatically, but not both.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="search-criteria" name="search" placeholder="Search..">
  <input type="button" id="search" value="search" />
</form>

JS:

$(document).ready(function() {
  $("#search-criteria").keydown(function(event) {
    if (event.keyCode === 13) {
      doSearch();
      event.preventDefault();
    }
  });

  $('#search').click(function() {
    doSearch();
  });

  function doSearch() {
    var txt = $('#search-criteria').val();
    $('.items:contains("' + txt + '")').addClass('searched');
  }
});

(note I also added a .preventDefault() to make sure that the default behavior of the enter key doesn't kick in, since it may submit your form)

Edit:

Moved duplicated code into its own function.

Upvotes: 3

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

  1. Remove the inline-event onkeydown you don't need it.

  2. You need to use preventDefault inside your myFunction function.

  3. Remove the classes inside your functions to see clearly the new search result. 

    $(document).ready(function() {
  $("#search-criteria").keypress(function(event) {
    if (event.which === 13) {
      myFunction();
    }
  });

  //code for the button
  $('#search').click(myFunction);
});

var myFunction = function() {
  event.preventDefault();

  var txt = $('#search-criteria').val();

  $('.items').removeClass('searched');
  $('.items:contains("' + txt + '")').addClass('searched');
}
    .searched {
  background-color: green;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type="text" id="search-criteria" name="search" placeholder="Search..">
  <input type="button" id="search" value="search" />
</form>


<ul>
  <li class="items">Coffee</li>
  <li class="items">Tea</li>
  <li class="items">Milk</li>
  <li class="items">Coffee</li>
  <li class="items">Tea</li>
  <li class="items">Milk</li>
  <li class="items">Coffee</li>
  <li class="items">Tea</li>
  <li class="items">Milk</li>
</ul>

Upvotes: 2

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23863

I made a couple of small changes to the code you posted and it is working well for me as a snippet.

I documented the changes in the code itself.

$(document).ready(function() {
  //code for Enter key
  function myFunction() {
    console.log("myFunction called");

    var txt = $('#search-criteria').val();
    $('.items:contains("' + txt + '")').addClass('searched');
  }

  $("#search-criteria").keydown(function(event) {
    if (event.keyCode === 13) {
      // Keep the ENTER key from submitting the form.
      event.preventDefault();
      myFunction();
    }
  });


  //code for the button
  $('#search').click(function() {
    var txt = $('#search-criteria').val();
    $('.items:contains("' + txt + '")').addClass('searched');

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<form>
  <!--
    the `onkeydown` on this can't work, since 'myfunction' isn't in the global space 
    so I removed it.
  -->

  <input type="text" id="search-criteria" name="search" placeholder="Search..">
  <input type="button" id="search" value="search" />
</form>

Upvotes: 1

Related Questions