我如何使用 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

确保像演示中一样包含所有 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>

Answer 2

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

Triggering manual Typeahead events

Each of the Typeahead events can be controlled by script and not only by user interaction. They all require a set of condition to be executed. The exact conditions can be tracked down inside the delegateEvents() function.
// 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 事件除了名称外没有任何其他内容，"set of condition to be executed" 也没有。所以我仍然不能 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>，应该可以做到。

我如何使用 Jquery 清除预输入？

How can i clear the typeahead input with Jquery?

jquery

typeahead

typeahead.js