如何在 twitter 引导程序中使用 Best In Place

Posted 2023-02-15

【中文标题】如何在 twitter 引导程序中使用 Best In Place

【英文标题】：how to use Best In Place with twitter bootstrap

【发布时间】：2013-01-25 15:02:04

【问题描述】：

我还没有看到这方面的任何文档..

如果我有

<%= best_in_place @user, :city,  type=> :input, %>

我需要包含 data-provide="typeahead"

<%= best_in_place @user, :city, type=> :input,:data => :provide => "typeahead" %>

并包含来源

<%= best_in_place @user, :city, :type=> :input, :data => :provide => "typeahead", :source => City.getcities.to_json %>

假设 City.getcities.to_json 返回带有城市名称的正确 json 列表

这行不通……

【问题讨论】：

你可以试试<%= best_in_place @user, :city, :type=> :input, :html_attrs => :'data-provide' => "typeahead", :'data-source' => City.getcities.to_json %>

这是一个改进。似乎有效，但只有当我用键盘而不是鼠标从列表中选择时..这是一个提前输入的问题吗？

似乎是一个引导问题github.com/twitter/bootstrap/issues/4018

我无法尝试，所以这可能是 bootsrap 中的问题，也可能与 best_in_place 发生冲突，因为 best_in_place 还订阅了输入模糊和 keyup 事件...

$('ul.typeahead').live('mousedown', function(e) e.preventDefault(); ); 似乎可以处理它

【参考方案1】：

使用:data 选项，您可以在生成的span 而不是input 本身上设置data- 属性。

如果您想在生成的input 元素上添加属性，您需要使用:html_attrs 选项：

<%= best_in_place @user, :city, :type=> :input, 
    :html_attrs => :'data-provide' => "typeahead", 
                    :'data-source' => City.getcities.to_json %>

但是 - 正如 @Nick Ginanto 所指出的 - 预输入选择仅适用于使用键盘而不是鼠标（可能是因为 bug in bootstrap 或因为有 no official support 最适合引导）

但是下面的代码 sn-p 似乎可以解决这个问题：

$('ul.typeahead').live('mousedown', function(e)  e.preventDefault(); );

【讨论】：

关于鼠标问题，上述解决方案对我不起作用。

好吧，鼠标悬停时列表消失的原因在bootstrap-typeahead.js，mouseleave() 函数中li:if (!this.focused && this.shown) this.hide()，列表被隐藏，因为 best_in_place 输入字段被聚焦，而不是列表。注释掉那行对我来说已经足够了。