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

感谢上面列出的精彩建议，因此我能够提前选择一种类型来更新表格。我需要做的最后一步是在选择之后/期间/之后清除文本框。我曾尝试将事件添加到onchange事件中，拦截select事件等。似乎没有任何工作。我能找到的唯一的其他参考资料没有答案。有自动完成的反应，但我似乎无法适应他们。任何帮助将不胜感激。选择jquery之后清除文本框typeahead.js

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

例子 - 你在文本框“达人”，3名出现在下拉菜单中选择1，它是前置到表上方。一旦发生这种情况，我需要清除文本框，目前它显示您选择的名称，并且您必须手动删除它。由于某些未知的原因，jsfiddle没有更新表格，但在我的本地代码中，它工作正常，我只需要知道如何自动清除“contactSearch”框。

来源

2015-04-23 Darkloki

可以请你创建http://jsfiddle.net演示？ – Dhiraj

实际上已经尝试过了，它不适用于jsfiddle。我发誓它在我的应用程序： - （http://jsfiddle.net/0xs63enb/ – Darkloki

其实问题不是很清楚（可能对我来说），但你可以请添加一个例子的问题？ – Dhiraj

您可以使用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

希望这有助于。

来源

2015-04-23 23:48:59 Dhiraj

我确定我可以根据你的演示得到它。Thanx太好了！ – Darkloki

我很高兴它有帮助 – Dhiraj

正是我需要的。 –

附加更新

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

来源

2017-03-28 20:37:17

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

回答

相关问题