x-editable + bootstrap 3 + Twitter typeahead.js无效

时间:2013-10-28 14:21:45

标签: javascript twitter-bootstrap-3 typeahead.js x-editable

我尝试将Bootstrap3与令人敬畏的x-editable和typeahead.js集成,但我无法使其工作:

我尝试了以下

  • 使用data-type ='typeaheadjs'
  • 标记元素
  • 将type ='typeaheadjs'添加到$()。editable()
  • 将所有参数移至data- * attributes
  • 将所有参数移至$()。editable()arguments

但没有运气。

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 个答案:

答案 0 :(得分:5)

您需要包含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