选择自动格式化的 jQuery

Question

我有一个使用 jQuery Chosen 的多选输入框。 它目前具有添加不在现有列表中的自定义值的功能。 但是，我很难尝试添加一个基本格式化用户自动输入的数字的附加功能。

例如：

用户输入： 12142113114444

预期输出： 1-2-1421:1311 ZIO 4444

我已经处理了格式化数字的逻辑。 我的问题是试图将它与我的 jQuery Chosen 输入框联系在一起。

我目前的输入框代码可以在这里找到：https://jsfiddle.net/b6xupfak/

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
    
<div style="padding: 20px;">

  <label>Bootstrap + jQuery Chosen</label>
  <div>
    <select id="num" data-placeholder="Enter a Number" class="chosen-select" style="width:350px;" tabindex="4" multiple>
            <option value="1-2-1421:1311 ZIO 4444">1-2-1421:1311 ZIO 4444</option>
            <option value="2-6-2862:2342 ZIO 0001">2-6-2862:2342 ZIO 0001</option>
            <option value="9-4-0082:3922 ZIO 7352">9-4-0082:3922 ZIO 7352</option>
    </select>   
  </div>

  <label>Bootstrap</label>
  <div>
    <input id="num_no_jqc" class="form-control" maxlength="21">
  </div>
  
</div>

我有一个 JavaScript 函数，它实现了第二个输入框的格式，它按预期工作。但是，当我尝试将其应用于已选择 jQuery 的输入框时，它不起作用。

$('.chosen-select').chosen({}).change( function(obj, result) {
    console.debug("changed: %o", arguments);
    console.log("selected: " + result.selected);
});

$(function (){

                                $("#num").on("chosen:no_results", function (evt, params) {
                    let elem = $("#num").siblings(".chosen-container").find(".chosen-choices .search-field:last input");
                    let text = elem.val().replace(/'/g, "");
                    text = `<button class="btn btn-success" onClick="addCustomNum('${text}')" style="height: 30px; font-size: 15px;">Add NEW TMK: '${text}'</button>`;
                    $("#num").siblings(".chosen-container").find(".no-results").html(text);
                    });
});

                                function addCustomNum(searchStr) {
                        let arr = $("#num").val();
                        $("#num").html($("#num").html() + "<option value='" + searchStr + "'>" + searchStr + "</option>");
                        $("#num").val(arr.concat([searchStr]));
                        $("#num").trigger("chosen:updated");
                                }


$(function () {

            $('#num').keydown(function (e) {
                var key = e.charCode || e.keyCode || 0;
                $text = $(this);
                if (key !== 8 && key !== 9) {
                    if ($text.val().length === 1) {
                        $text.val($text.val() + '-');
                    }
                    if ($text.val().length === 3) {
                        $text.val($text.val() + '-');
                    }
                    if ($text.val().length === 7) {
                        $text.val($text.val() + ':');
                    }
                    if ($text.val().length === 12) {
                        $text.val($text.val() + ' ZIO ');
                    }
                }
                return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
            })
            
            
            $('#num_no_jqc').keydown(function (e) {
                var key = e.charCode || e.keyCode || 0;
                $text = $(this);
                if (key !== 8 && key !== 9) {
                    if ($text.val().length === 1) {
                        $text.val($text.val() + '-');
                    }
                    if ($text.val().length === 3) {
                        $text.val($text.val() + '-');
                    }
                    if ($text.val().length === 7) {
                        $text.val($text.val() + ':');
                    }
                    if ($text.val().length === 12) {
                        $text.val($text.val() + ' ZIO ');
                    }
                }
                return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
            })        
});

似乎 jQuery Chosen 有一个可能负责处理用户输入的特定元素，但我不太清楚它是什么。

Answer 1

当您在选择元素中使用multiple 时，它基本上会使用 DOM 中的现有元素创建一个新元素。如果你通过开发工具检查，你会发现它。因此，当您实际尝试使用 Id -> num 获取输入值时，它实际上在 DOM 中创建了不同的 Id 和输入字段。

而不是尝试这个：

$('#num').keydown(function (e) {}

尝试使用这个：

$("#num_chosen").find("input").keydown( function (e) {}

如果你打开开发工具，你会看到它用id -> num_chosen 和一个输入元素创建了一个新的 div，我所做的只是尝试找到那个元素并且它工作正常。

Workable Fiddle

您可能希望根据需要提供进一步的逻辑。

注意：我不是 DOM 操作方面的专家，所以我的解释不会像专业人士给出的那么好。