How can i clear the typeahead input with Jquery?

Question

The html part in my test case is

    <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>

While using this jquery typeahad library, like so... (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
        });

I have issues in clearing the input after selection.

On the callback event i tried to clear the value by using

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

or even with

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

but any of these works as expected. It seems that the event that was raised upon selecting the input, does not raise any more.

Update While using $("#txtSearchProduct").val("") the input is cleared, but again it partially works unless i click on the close button.

Answer 1

Update: after reading the documentation more carefully I've found:

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');

The documentation is not thorough. There is nothing about propertychange.typeahead event except for its name, and about "set of condition to be executed". So I still can't say with a 100% certainty, but this also should work (works on the demo page):

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

And it doesn't break encapsulation.

---

Original answer: I don't see anything about your case in the documentation. But in the source code of Typeahead you can see this:

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

where scope is Typeahead object for the input. So, I tried this:

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

in the browser console on the demo page, and it worked fine, as far as I could notice. In your case you should access Typeahead object of your input with this:

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

Of cause, this approach breaks encapsulation. But either this or you should ask for a feature from the authors off Typeahead and wait. Because just clearing the input value is not enough - you need to correctly clear the state of a Typeahead object.

Another way: or you can just simulate keyboard events. Set focus on the input and send one <Esc>, that should do it.