Question

我使用了dropdown（Jquery Selectmenu Widget）。我的下拉列表包含数字和字符串值。我想从下拉列表中搜索文本。我已应用以下代码来实现我的要求。

例如$（“＃ddlCategory-button”）。find（“option：selected”）。text（）;

所以，如果我输入数字以及键盘上的文本（功能键下方），它的效果很好但如果我从数字键盘（键盘右侧）输入数字，它就无法正常工作。

请给我一些解决方案。

谢谢你 -Nimesh。

Answer 1

当您在键盘上键入2而不在数字键盘上键入时，这表示ASCII字符50。当您点击键盘上的2时，如果启用NUM LOCK，则为ASCII字符98;没有NUM LOCK，它是40，它映射到向下箭头。

这方面的工作示例：https://jsfiddle.net/Twisty/uthohe3y/1/

要解决此问题，您需要将事件映射到KeyDown，KeyUp或KeyPress事件。看起来像是：

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

我们需要对此做点什么。我怀疑你想要选择相应的选项。

以下是一种方法：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;
    }
  });
});

感谢：Set a jQuery UI selectmenu to a specific option by javascript

Answer 2

我根据上述代码找到了Chrome浏览器的解决方案。实际上上面的代码不适用于Chrome浏览器，因为e.key无法在Chrome中运行。因此，在这种情况下，您可以尝试以下Chrome代码。我刚修改了Chrome浏览器的上述代码。

适用于Chrome浏览器

$(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/

Answer 3

最后我得到了一些解决方案，如下所示，它对我有用。

$("#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();
        });

使用数字小键盘中的jQuery（键盘右侧）从下拉列表（选择框）中获取所选文本/数字

3 个答案: