处理Twitter Bootstrap Typeahead中的选定事件?

2021/01/28 09:51 · jquery ·  · 0评论

我想在用户使用twitter bootstrap Typeahead选择一个值后立即运行Javascript函数

我搜索诸如选定事件之类的东西。

$('.typeahead').on('typeahead:selected', function(evt, item) {
    // do what you want with the item here
})
$('.typeahead').typeahead({
    updater: function(item) {
        // do what you want with the item here
        return item;
    }
})

有关以下内容的示例,请参见下面的代码示例,以了解预输入的工作方式:

HTML输入字段:

<input type="text" id="my-input-field" value="" />

JavaScript代码块:

$('#my-input-field').typeahead({
    source: function (query, process) {
        return $.get('json-page.json', { query: query }, function (data) {
            return process(data.options);
        });
    },
    updater: function(item) {
        myOwnFunction(item);
        var $fld = $('#my-input-field');
        return item;
    }
})

说明:

  1. 输入字段设置为第一行的预输入字段: $('#my-input-field').typeahead(
  2. 输入文本后,它会触发source:获取JSON列表并将其显示给用户的选项。
  3. 如果用户单击一个项目(或使用光标键选择它并输入),则它将运行该updater:选项。请注意,它尚未使用所选值更新文本字段
  4. 您可以使用item变量来抓取所选项目,并使用它来做您想做的事情,例如myOwnFunction(item)
  5. 我提供了一个创建对输入字段本身的引用的示例$fld,以防您想对它进行某些操作。请注意,您不能使用$(this)引用该字段
  6. 然后,必须return item;updater:选项中包括该行以便使用item变量实际更新输入字段

第一次在这里发布答案(虽然很多时候我在这里找到答案),所以这是我的贡献,希望对您有所帮助。您应该能够检测到更改-尝试以下操作:

function bob(result) {
    alert('hi bob, you typed: '+ result);
}

$('#myTypeAhead').change(function(){
    var result = $(this).val()
    //call your function here
    bob(result);
});

根据他们的文档,处理selected事件的正确方法是使用以下事件处理程序:

$('#selector').on('typeahead:select', function(evt, item) {
    console.log(evt)
    console.log(item)
    // Your Code Here
})

我创建了包含该功能的扩展。

https://github.com/tcrosen/twitter-bootstrap-typeahead

source:  function (query, process) {
    return $.get(
        url, 
        { query: query }, 
        function (data) {
            limit: 10,
            data = $.parseJSON(data);
            return process(data);
        }
    );
},
afterSelect: function(item) {
    $("#divId").val(item.id);
    $("#divId").val(item.name);

}
本文地址:http://jquery.askforanswer.com/chulitwitter-bootstrap-typeaheadzhongdexuandingshijian.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!