jquery - 如何使用 Jquery 清除预先输入的输入？

问题描述

我的测试用例中的 html 部分是

    <div class="typeahead__container">
         <div class="typeahead__field">
             <div class="typeahead__query">
                  <input class="txtSearchProduct" id="txtSearchProduct" autocomplete="off" tabindex="8">
                  </div>
             </div>
         </div>
    </div>

在使用这个jquery typeahad库时，像这样......（演示在这里）

$.typeahead({
            input: '.txtSearchProduct',
            minLength: 0,
            maxItem: 15,
            order: "asc",
            hint: true,
            href: "",
            searchOnFocus: true,
            emptyTemplate: 'No results found "{{query}}"',
            display: ["id", "code", "name", "table"],
            template: "{{name}}<small style='color:#999;'>{{code}}</small>",
            source: {
                "Products": {
                    ajax: {
                        url: "/search/product",
                        path: ""
                    }
                }
            },
            callback: {
                onClickAfter: function (node, a, item, event) {
                    //debugger;
                    event.preventDefault;
                    //$("#txtSearchProduct").val("");
                    $.ajax({
                        type: "POST",
                        url: "/controller/add/" + item.id,
                        success: function (data) {

                        },
                        error: function (data) {

                        },
                        done: function () {

                            $("#loading").hide();

                        }

                    });
                }
            },

            debug: true
        });

我在选择后清除输入时遇到问题。

在回调事件中，我尝试使用清除值

$('#txtSearchProduct').typeahead('val', '');

甚至与

$('.typeahead').typeahead('txtSearchProduct', '');

但其中任何一个都按预期工作。似乎在选择输入时引发的事件不再引发。

更新虽然使用$("#txtSearchProduct").val("")输入被清除，但它再次部分工作，除非我点击关闭按钮。

标签： jquerytypeahead.jstypeahead

解决方案

更新：更仔细阅读文档后，我发现：

触发手动Typeahead事件

每个Typeahead事件都可以通过脚本来控制，而不仅仅是通过用户交互。它们都需要一组条件才能执行。可以在 delegateEvents() 函数中追踪确切的条件。
// Events
'focus.typeahead',
'input.typeahead',
'propertychange.typeahead',
'keydown.typeahead',
'dynamic.typeahead',
'generateOnLoad.typeahead'

// Trigger a manual search from the string inside the input
// See #Game_v3 demo to understand why it is being used at that place
$('#mySearchInput').trigger('input.typeahead');

文档不完整。propertychange.typeahead除了它的名称和“要执行的条件集”之外，没有任何关于事件的内容。所以我仍然不能 100% 肯定地说，但这也应该有效（在演示页面上有效）：

$("#txtSearchProduct").val("")
$("#txtSearchProduct").trigger('propertychange.typeahead');

而且它不会破坏封装。

原始答案： 我在文档中没有看到任何关于您的案例的信息。但是在Typeahead的源代码中你可以看到：

$("<span/>", {
    class: this.options.selector.cancelButton,
    html: "×",
    mousedown: function (e) {
       // Don't blur the input
       e.stopImmediatePropagation();
       e.preventDefault();

       scope.resetInput();
       scope.node.trigger("input" + scope.namespace, [e]);
    }
}).insertBefore(this.node);

输入scope的对象在哪里。Typeahead所以，我尝试了这个：

const typeahead_for_input = window.Typeahead[".js-typeahead-country_v1"]

typeahead_for_input.resetInput()
    // clears input and reset some internal variabales

typeahead_for_input.node.trigger("input" + typeahead_for_input.namespace, []) // no event
    // Hides "cancel" button, and maybe a lot more - haven't looked into

在演示页面的浏览器控制台中，据我所知，它运行良好。在您的情况下，您应该使用Typeahead以下方法访问输入对象：

const typeahead_for_input = window.Typeahead[".txtSearchProduct"]

当然，这种方法会破坏封装。但是，无论是这个还是你应该从Typeahead的作者那里请求一个功能，然后等待。因为仅仅清除输入值是不够的——你需要正确清除一个Typeahead对象的状态。

另一种方式：或者您可以只模拟键盘事件。将焦点放在输入上并发送一个<Esc>，应该这样做。

jquery - 如何使用 Jquery 清除预先输入的输入？

问题描述

解决方案

推荐阅读