我在Twitter Typeahead Semantic UI内有一个modal。期望的行为是用户可以在确认他们的选择之前从先行者中选择一些并且仍然在模态中工作。但是,如果用户单击选择,则模态会提前关闭。这只在点击时发生;如果用户使用箭头键选择一个选项,或使用 Tab 完成,则模态将保持打开状态。
我做了一个JSFiddle来证明这个问题。下面的最小代码摘要:
<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>
$('#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()
,但都没有解决问题。