在twitter bootstrap Typeahead处理选定的事件？

i want to run javascript function just after user select a value using twitter bootstrap Typeahead

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

i search about some thing like selected event

我搜索一些像选定的事件

7 个解决方案

#1

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

#2

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

#3

first time i've posted an answer on here (plenty of times I've found an answer here though), so here's my contribution, hope it helps. You should be able to detect a change - try this:

我第一次在这里发布了答案(很多时候我在这里找到了答案),所以这是我的贡献,希望它有所帮助。你应该能够检测到一个变化 - 试试这个:

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

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

#4

For an explanation of the way typeahead works for what you want to do here, taking the following code example:

有关typeahead在此处执行操作的方式的说明,请使用以下代码示例:

HTML input field:

HTML输入字段:

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

JavaScript code block:

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

Explanation:

Your input field is set as a typeahead field with the first line: $('#my-input-field').typeahead(

您的输入字段设置为具有第一行的预先输入字段:$('#my-input-field')。typeahead(

When text is entered, it fires the source: option to fetch the JSON list and display it to the user.

输入文本时,它会触发source:选项以获取JSON列表并将其显示给用户。

If a user clicks an item (or selects it with the cursor keys and enter), it then runs the updater: option. Note that it hasn't yet updated the text field with the selected value.

如果用户单击某个项目(或使用光标键选择并输入),则会运行updater:选项。请注意,它尚未使用所选值更新文本字段。

You can grab the selected item using the item variable and do what you want with it, e.g. myOwnFunction(item).

您可以使用项目变量获取所选项目并使用它执行所需的操作,例如myOwnFunction(项目)。

I've included an example of creating a reference to the input field itself $fld, in case you want to do something with it. Note that you can't reference the field using $(this).

我已经包含了一个创建对输入字段本身$ fld的引用的示例,以防您想要对它执行某些操作。请注意,您不能使用$(this)引用该字段。

You must then include the line return item; within the updater: option so the input field is actually updated with the item variable.

然后,您必须包括行返回项;在updater:选项中,所以输入字段实际上是使用item变量更新的。

#5

I created an extension that includes that feature.

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

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

#6

According to their documentation, the proper way of handling selected event is by using this event handler:

根据他们的文档,处理所选事件的正确方法是使用此事件处理程序:

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

#7

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

}

#1

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

#2

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

#3