语义UI模式在Twitter Typeahead选择上关闭

时间:2014-01-12 20:19:41

标签: javascript jquery semantic-ui twitter-typeahead

我在Twitter Typeahead Semantic UI内有一个modal。期望的行为是用户可以在确认他们的选择之前从先行者中选择一些并且仍然在模态中工作。但是,如果用户单击选择,则模态会提前关闭。这只在点击时发生;如果用户使用箭头键选择一个选项,或使用 Tab 完成,则模态将保持打开状态。

我做了一个JSFiddle来证明这个问题。下面的最小代码摘要:

的index.html:

<div id="pick-user-modal" class="ui modal"><i class="close icon"></i>
    <div class="header">Select user</div>
    <div class="content">
      <input type="text" id="user-field" />
    </div>
    <div class="actions">
      <a id="send-request" class="ui green button">Select user</a>
    </div>
</div>
<a class="green ui button" id="show-pick-user-modal">Select user</a>

main.js:

$('#pick-user-modal').modal();
$('#show-pick-user-modal').click(function () {
    $('#pick-user-modal').modal('show');
});
var $users = $('#user-field');
$users.typeahead({
    name: 'users',
    local: ["Andy","Betty","Charles","Dotty","Elton","Fred","Grace","Harriet",
            "Ichabod","Jenny","Karen","Louise","Michael","Nathan","Oswald",
            "Patricia","Quendy","Robert","Sylvia","Thomas","Ursula","Vivian",
            "Wendy","Xavier","Yvonne","Zachary"]
});
function setUser(e,d){
    alert(d.value);
}
$users.on('typeahead:selected',setUser);
$users.on('typeahead:autocompleted',setUser);

我尝试从false返回setUser并调用e.preventDefault(),但都没有解决问题。

1 个答案:

答案 0 :(得分:0)

我已经看到完全相同的问题。阻止它关闭的唯一因素是设置可关闭为false, 这不是我原本会使用的设置。

为模式启用调试模式时,会收到以下消息:

1

我怀疑jquery并不知道该元素。