x-editable + bootstrap 3 + Twitter typeahead.js 不工作

Posted 2023-05-08

【中文标题】x-editable + bootstrap 3 + Twitter typeahead.js 不工作

【英文标题】：x-editable + bootstrap 3 + Twitter typeahead.js not working

【发布时间】：2013-11-07 08:55:41

【问题描述】：

我尝试将 Bootstrap3 与很棒的 x-editable 和 typeahead.js 集成，但我无法使其工作：

我尝试了以下

用 data-type='typeaheadjs' 标记元素 将 type='typeaheadjs' 添加到 $().editable() 将所有参数移至 data-* 属性 将所有参数移至 $().editable() 参数

但没有运气。

html 代码：

<div style="margin: 150px">
    <a href="#" id="username">Rome</a>
</div>

JS代码：

$('#username').editable(
    mode: 'inline',
    showbuttons: false,
    type: 'text',
    url: '/post',
    pk: 1,
    title: 'Enter an Italian city',
    typeahead: 
        local: ['Rome', 'Milan', 'Venice', 'Florence']
    
);        

在这里提琴：http://jsfiddle.net/Ggxbm/3/

即使是http://vitalets.github.io/x-editable/docs.html#typeaheadjs 提供的示例也不适合我

我做错了什么？

【参考方案1】：

您需要包含 typeahead.min.js AND typeaheadjs.js

正如你在这个小提琴中看到的http://jsfiddle.net/9q7Jd/1/ 添加

http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/inputs-ext/typeaheadjs/typeaheadjs.js

正在解决问题。

您可以在目录 inputs-ext/typeaheadjs 的 zip 存档中找到 typeaheadjs.js： https://github.com/vitalets/x-editable/tree/master/src/inputs-ext/typeaheadjs