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

【问题标题】：Clear textbox after select jquery typeahead.js选择 jquery typeahead.js 后清除文本框
【发布时间】：2015-04-23 22:48:37
【问题描述】：

感谢 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”框。

【问题讨论】：

你能在jsfiddle.net上创建一个演示吗？
实际试过了，在jsfiddle上不行。我发誓它适用于我的应用程序 :-( jsfiddle.net/0xs63enb
其实这个问题不是很清楚（可能对我来说）但是你能在问题中添加一个例子吗？
希望我刚刚所做的编辑能澄清一点

标签： jquery typeahead.js

【解决方案1】：

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

typeahead:selected – 当下拉菜单中的建议被选中时触发。事件处理程序将使用 3 个参数调用：jQuery 事件对象、建议对象和建议所属数据集的名称。

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

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

这是一个DEMO

希望这会有所帮助。

【讨论】：

我相信我可以根据你的演示让它工作。非常感谢！
正是我需要的。
按预期工作。我创建了一个包装 jquery 模块的 vue 组件。问题是，清除搜索框后过滤的项目仍然存在。如果为空，则在观察值更改后执行此语句按预期工作。

【解决方案2】：

添加更新器

updater: function (item) {
                    comp = map[item];
                    if (typeof comp != 'undefined') {
                        _cid = map[item].myid;                             
                        return '';  // here return blank
                    }
                },

【讨论】：