jquery - 选择 jquery typeahead.js 后清除文本框

Question

感谢 SO 上列出的精彩建议，我能够提前编写出一种类型，该类型将在选择时更新表格。我需要做的最后一步是在选择时/期间/之后清除文本框。我尝试过向表 onchange 事件添加内容、拦截 select 事件等，但似乎没有任何效果。我在这里能找到的唯一其他引用资料没有答案。有自动完成的响应，但我似乎也无法适应它们。任何帮助将不胜感激。

    $(document).ready(function () {

    var ds = [
           @if (ViewData.ModelState.IsValid)
             {
                 var index = 0;
                 foreach (var person in Model)
                 {
                     var jaUser = "{ name: \" " + person.UserName + "\", mobi: \"" + person.MobilePhone + "\" }";
                     if (index > 0) { jaUser = ',' + jaUser; }

                                   @Html.Raw(jaUser)                                       
                     index++;
                 }
             }
    ];

    var d = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: ds
    });
    d.initialize();

    $('#contactSearch').typeahead(
{
    hint: true,
    highlight: true,
    minLength: 1,
},
{
    name: 'd',
    displayKey: 'name',
    source: d.ttAdapter(),
    templates: {
        empty: 'not found', //optional
        suggestion: function (el) {
            return "<span onclick=\"addUser2list('" + el.name + "');\"><img src='" + el.mobi + "' />" + el.name + "</span>"
        }
    }
}
);


});


function addUser2list(mobnum){
    if (mobnum.length > 0){
        row = $("<tr></tr>");
        col1 = $("<td>col1</td>");
        col2 = $("<td>"+ mobnum +"</td>");
        col3 = $("<td>col3</td>");
        row.append(col1, col2, col3).prependTo("#mytable");
        //$('#contactSearch').val('');
    }
} 

示例 - 您在文本框中输入“da”，下拉列表中出现 3 个名称，您选择 1，它会添加到上表的前面。一旦发生这种情况，我需要清除文本框，目前它显示您选择的名称，您必须手动删除它。由于某种未知的原因，jsfiddle 没有更新表格，但在我的本地代码中它工作正常，我只需要知道如何自动清除“contactSearch”框。

Answer 1

您可以使用 typeahead:selected 捕获从下拉列表中选择项目的事件。 There are more events that can be used .

typeahead:selected – Triggered when a suggestion from the dropdown menu is selected. The event handler will be invoked with 3 arguments: the jQuery event object, the suggestion object, and the name of the dataset the suggestion belongs to.

on('typeahead:selected', function(obj, datum){ //datum will be the object that is selected 
    myTypeahead.typeahead('val','');
    addUser2list(datum);
});

$('.typeahead').typeahead('val',''); 将清空文本框的值。

这是一个 DEMO

希望这有帮助。