0

I have used dropdown (Jquery Selectmenu Widget). My dropdown consists of number as well as string values. and I want to search text from the dropdown. I have applied below code to achieve my requirement.

e.g $("#ddlCategory-button").find("option:selected").text();

So, It's working well in the case if I entering numbers as well as texts from keyboard(below functions key) but it's not working if I am entering numbers from Numerical keypad(right side of keyboard).

Please give me some solution.

Thanks
-Nimesh.

Nimesh
  • 3,342
  • 1
  • 28
  • 35
  • Did you enable your Num Lock? – Twisty Mar 25 '16 at 14:54
  • Yes, I have enabled NUm Lock as well. – Nimesh Mar 28 '16 at 04:09
  • Is there another computer you can test this on? – Twisty Mar 28 '16 at 04:11
  • Sorry, but it's not a problem related to computer. I able to type numbers using Numerical keys (from right side). – Nimesh Mar 28 '16 at 04:19
  • Ok, what steps would I need to replicate the issue? – Twisty Mar 28 '16 at 04:28
  • Let me describe the issue here. – Nimesh Mar 28 '16 at 04:34
  • Using this example, I can navigate each number by pressing the corresponding number 0 - 9 or letter a - z: https://jsfiddle.net/Twisty/uthohe3y/ In the same example, I can use the Number Pad to navigate the direction of the cursor, like I would using the arrow keys. This is the expected behavior. – Twisty Mar 28 '16 at 04:38
  • Let me describe the issue here. I have used Jquery selectmenu (dropdown) and my dropbox contains numbers. Now I want to search number based on entered numbers from Numerical Keypad(right side). To replicate the issue you need to used Jquery selectmenu with static numbers like 1,2,3,4..... 20 etc and then entered any numbers from keypad. So, this way you can replicate the issue. – Nimesh Mar 28 '16 at 04:41
  • Exactly, you example is really good. now suppose you entered "1" below functions key then it's would work but if you entered "1" from Numerical keypad then it's not working. – Nimesh Mar 28 '16 at 04:42
  • This is due to ASCII. The "2" key (that has @ above it) is different than "2" on the keypad. Even moreso when NUM LOCK is on. Show you in answer. – Twisty Mar 28 '16 at 04:46
  • So, what to do if I need to search/find numbers on Dropdown(Jquery selectedmenu) using Numerical Keypad ? Is there any solution ? – Nimesh Mar 28 '16 at 04:48

3 Answers3

1

When you type 2 on your Keyboard, and not on the Number Pad, this represents ASCII character 50. When you hit 2 on the keypad, with NUM LOCK on, this is ASCII character 98; w/o NUM LOCK, it's 40 which is mapped to the Down Arrow.

Working Example of this: https://jsfiddle.net/Twisty/uthohe3y/1/

To fix this, you will want to map an event to either KeyDown, KeyUp, or KeyPress events. Would look something like:

$(document).keypress(function(e){
  console.log("Key '" + e.key + "' pressed, Character Code: " + e.which);
});

We will need to then do something with this. I suspect you want the corresponding option selected.

Here is one way to do this: https://jsfiddle.net/Twisty/uthohe3y/3/

$(function() {
  $("#number").selectmenu().selectmenu("menuWidget").addClass("overflow");
  $(document).keyup(function(e) {
    var key = e.key;
    $("#keyInfo").html("Key : " + key + " (" + e.which + ")");
    if ($("[id*='-button']").is(":focus") && (parseInt(key) < 10)) {
      e.preventDefault();
      if ($("#number option:contains('" + key + "')").length) {
        $("#number").val(key);
      }
      $("#number").selectmenu("refresh");
    } else {
      return true;
    }
  });
});

Kudos to: Set a jQuery UI selectmenu to a specific option by javascript

Community
  • 1
  • 1
Twisty
  • 30,304
  • 2
  • 26
  • 45
  • Thank you so much Twisty... This is what I need.. still, one issue found. I really grateful if you could help me. Suppose I need to find/search value of 13 then it's not possible by entering number from Number pad. but it's working well if you press below function keys. Did you getting what I mean ? – Nimesh Mar 28 '16 at 05:44
  • And one more thing that I don't know why but your example is not working in Chrome Browser. I have Version 49.0.2623.87 m (64-bit). Will you please verify at your end ? – Nimesh Mar 28 '16 at 06:05
  • These are both things I think you can work out yourself. I will give you a high level example for both. 1) Start a timer when the first key is pressed. If the second key is pressed within a specific time, combine the and find that integer in `options:contains('13')`. 2) This may be due to the event bindings in Chrome vs FF. Check your development tools to see if `key`, `which`, or `charCode` are thrown in the event. Determine which you will use. – Twisty Mar 28 '16 at 06:09
  • Thanks!! for your help. let me try to fix these two issues myself. – Nimesh Mar 28 '16 at 06:13
  • No worries! If you get stuck, you can search or post another question. I would advise adding a bit more code in the future to get a quicker response. – Twisty Mar 28 '16 at 06:14
  • Yes... Sure... Thank you very much once again – Nimesh Mar 28 '16 at 06:15
  • Did you know how to fire/bind 'KeyDown, KeyUp, or KeyPress' events for Jquery Selectmenu Widget ? "$(document).keyup(function(e) " If I used above line then it's call every time no matter on which control I am pressing a key. I have tried to find out the way but didn't get any solution. – Nimesh Mar 28 '16 at 12:13
  • Yes, can bind to a selector like `$("#number-button")` – Twisty Mar 28 '16 at 13:58
0

I found some solution for Chrome Browser based on above code. Actually above code is not working for Chrome Browser due to e.key is not working in Chrome.So in that case you can try below code for Chrome. I just modified above code for Chrome Browser.

For Chrome Browser

$(function() {
  $("#number").selectmenu().selectmenu("menuWidget").addClass("overflow");
  $(document).keypress(function(e) {
    var key = String.fromCharCode(e.which); 
    $("#keyInfo").html("Key : " + key + " (" + e.which + ")");
    if ($("[id*='-button']").is(":focus") && (parseInt(key) < 10)) {
      e.preventDefault();
      if ($("#number option:contains('" + key + "')").length) {
        $("#number").val(key);
      }
      $("#number").selectmenu("refresh");
    } else {
      return true;
    }
  });
});

https://jsfiddle.net/nshalia_js/dxf37co6/

Nimesh
  • 3,342
  • 1
  • 28
  • 35
0

Finally I got some solution as below and it's working for me.

$("#ddlCategory-button").keyup(function (e) {
            debugger;
            console.log('e.key' + e.key + 'e.which' + e.which + 'e.keyCode' + e.keyCode);
            if (96 <= e.keyCode && 105 >= e.keyCode) {
                var WhCode = prompt("Please enter Code");
                if (WhCode != null && $.isNumeric(WhCode)) {
                    if ($("#ddlCategoryoption:contains('" + WhCode + "')").length) {
                        $("#ddlCategory").val(WhCode);
                        $("#ddlCategory").trigger("selectmenuchange");
                    }
                    $("#ddlCategory").selectmenu("refresh");
                }
                else {
                    return true;
                }
            }
            $('#ddlCategory-button').focus();
        });
Nimesh
  • 3,342
  • 1
  • 28
  • 35