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

Question

我的测试用例中的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 库时， 像这样... (demo's here)

$.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("") 时，输入被清除，但它再次部分工作，除非我点击关闭按钮。

Answer 1

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

手动触发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

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

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

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

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

Answer 2

确保您包含所有 HTML，就像在演示中一样，如果这就是您要查找的内容，请告诉我

在下面创建了一个演示供您测试：

$.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
});

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.11.0/jquery.typeahead.css">

<form>
  <div class="typeahead__container">
    <div class="typeahead__field">
      <div class="typeahead__query">
        <input class="txtSearchProduct" name="q" autofocus autocomplete="off">
      </div>
      <div class="typeahead__button">
        <button type="submit">
                    <span class="typeahead__search-icon"></span>
                </button>
      </div>
    </div>
  </div>
</form>