7

First of all Sorry, I don't know what to call those keys (ENTER, F1, HOME, etc).

Actually, I'm creating an input search box which onkeyup calls a function. When the user has input at least two keys my function is called and relevant search results are displayed using AJAX. The problem is when the user presses arrow key, HOME, END, etc then also my ajax is called which I don't want. And pressing F5 key to reload the page when focused on the input don't reloads the page, instead calls the AJAX, that's why it's a big issue for me.

$('input[name=\'search\']').on(keyup, function(e) {
  if ($('input[name=\'search\']').val().length >= 2) {
    // call ajax to display results..
  }
});

I want to add an extra expression in the if, that checks if the non-visible key is pressed or not. Like -

if ($('input[name=\'search\']').val().length >= 2 && (EXPRESSION FOR VISIBLE KEYS)) {
  // call ajax to display results..
}

If any visible key is pressed then ajax is called, else its not.

I don't know how to achieve this. As I cannot do e.keycode == '65' for each keys like A,B,C,\,=,+,1,2,3,etc

Is there a ready made library to check this or any other way to do this? Please help me.

Rohit Kumar
  • 2,048
  • 1
  • 14
  • 28
  • window.event.shiftKey ? http://stackoverflow.com/questions/6178431/how-to-catch-enter-keypress-on-textarea-but-not-shiftenter – trainoasis Jul 07 '15 at 18:40

4 Answers4

3

You can check if e.which or e.keyCode is between 48 and 90, which corresponds to any number or letter of the alphabet. http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

if (+e.which >= 48 && +e.which <=90){ ... }

If you want to support other ones that arnt just alphanumeric, the easiest way i can see is to create an array of all the keycodes you want to whitelist, and check if the array contains the keycode. this is a good thread on how to do that: How to find if an array contains a specific string in JavaScript/jQuery?

Community
  • 1
  • 1
PhilVarg
  • 4,762
  • 2
  • 19
  • 37
2

Event keyCode is your answer:

$('input[name=\'search\']').keyup(function(event) {
   console.log( event.keyCode );
});

For example the keyCode for Enter key is 13. Also you can check Ctrl, Shift and Alt keys by the following variables:

if(event.ctrlKey) {
      if (event.ctrlLeft) {
        console.log('ctrl-left'); 
      }
      else {
        console.log('ctrl-right');
      }
}
event.altKey
...
event.altLeft
...
event.shiftKey
...

For the accepting only letters, you may use this way:

var letter = String.fromCharCode(e.which);
if (/[a-z\d]/i.test(letter)) {
    // send ajax call
}
jezrael
  • 822,522
  • 95
  • 1,334
  • 1,252
Yashar
  • 133
  • 3
  • there are a lots of non-visible keys like F1, F2,... END, INSERT, etc.. I can't check for every keycode, the code will become lengthy. – Rohit Kumar Jul 07 '15 at 19:18
  • I see. I will edit my answer to show how you can accept only letters in your search box. – Yashar Jul 07 '15 at 19:25
  • Your answer is a good solution but after 3 letters if user press some non-letter key your ajax function will be called again. – Yashar Jul 07 '15 at 19:32
  • howz that? :( I've checked entering 3,4,5,6 visible keys on my localhost and each time pressing the non-visible keys and ITS WORKING FINE.. my ajax is not called as I have inserted an alert in my function whenever ajax is called. I'm not seeing any alert window. – Rohit Kumar Jul 07 '15 at 19:38
1

I have got another solution to check whether a visible character key was pressed or not. Actually the basic thing I used in my code is that the visible character keys when pressed will change the length of the value of input field. I used keydown instead of keyup to get length of the string just before the current key is pressed. Have a look to my code -

$('input[name=\'search\']').on('keydown', function() {
      var orig_len = $('input[name=\'search\']').val().length; // this gets the original length just before the key was pressed
      setTimeout(function() {
          if ($('input[name=\'search\']').val().length >= 2 && $('input[name=\'search\']').val().length != orig_len) {
            // my ajax call
          }, 25);
        /* in 25ms the lenght is updated and the if checks
        whether length has changed from previous or not
        because visible char key changes length
        */
      });

The setTimeout was necessary because this 25ms elapsed time is more than enough to update the lenght of the input field after the current key is pressed.

Please have a discussion on this and tell me it is okay or not or have some bad impact or can cause issue on different browsers as I have not checked it yet on other browsers.

UPDATE: Its fully functional on all major browsers. Its working as I wanted it to be.

Rohit Kumar
  • 2,048
  • 1
  • 14
  • 28
0

Another answer is a good JavaScript component to implement an advanced search box, like TypeAhead component, easy peasy ;)

Please have a look at : https://twitter.github.io/typeahead.js/examples/

Yashar
  • 133
  • 3