javascript - Bootstrap typeahead updater 选项

标签 javascript twitter-bootstrap

我正在尝试使用 Twitter Bootstrap 的 typeahead javascript 更新程序选项来检索同一行的多个值,然后在输入框的同一选定行上显示一列,在另一列上显示另一列。不幸的是,我似乎无法找出下面的代码如何无法更新 ID 为 ProductName 的输入框。

$('#ProductName').typeahead({
                source: function(query,process){
                    var query = {query:query};
                    return $.post('/products/ajax_search_product_by_name',query,function(data){
                        return process(data.options);
                    },"json");
                },
                minLength: 3,
                items: 50,
                updater: function(item){
                    lastIndex = item.lastIndexOf('-');
                    length = item.length;

                    var product_id;
                    var product_name;
                    product_id = item.substr(lastIndex + 1, length);
                    product_name = item.substr(0,lastIndex);
                    document.getElementById('ProductName').value = product_name;
                    console.log(product_name);
                }

我在文档中读到该项目具有 typeahead 实例的范围:

The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.

所以我尝试了 this 而不是使用 DOM 选择器,但它也不起作用。我还尝试了 $('#ProductName').val(product_name) 的 jQuery 方式,但没有成功。

我是不是漏掉了什么?

最佳答案

你在这里遗漏了一些东西:) updater 方法不应该将值设置到输入中,只是为了返回它。 实际值的设置是在updater方法调用后完成的。 我相信,如果您以以下方式结束您的updater 方法:

return product_name;

它应该可以正常工作。

关于javascript - Bootstrap typeahead updater 选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14059824/

相关文章:

javascript - 如何重置模态主体

javascript - 如何在使用 Ajax 时在 JavaScript 和 PHP 中为下拉菜单设置增量值

javascript - 如何正确使用 toggleClass 更改 div css?

html - vue bootstrap中的卡填充问题

css - Bootstrap 下拉列表的堆叠问题

html - Bootstrap v4 多个 navbar-toggleable 由单个 navbar-toggler 定位

Javascript 将时间转换为括号

javascript - 我如何像 lodash 一样使用 JSDoc 对参数进行分组?

javascript - firestore 检查 id 是否存在于 id 数组中

html - 无法使用 id 选择器更改 Bootstrap h1 文本颜色?