清除表单字段后选择jQuery UI的自动完成
-
23-09-2019 - |
题
我正在开发一种形式,并使用jQuery UI自动完成。当用户选择一个选项,我想选择流行到附在母体<p>
标签的跨度。然后我想现场清除,而不是选择进行填充。
我的跨度出现就好了,但我不能让现场清除。
你怎么取消jQuery UI的自动完成的默认选择的动作?
下面是我的代码:
var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
source: availableTags,
select: function(){
var newTag = $(this).val();
$(this).val("");
$(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
}
});
简单地做$(this).val("");
不起作用。什么是让人郁闷的是,几乎确切功能工作正常,如果我不理自动完成,只是采取行动,当用户键入一个逗号作为这样的:
$('[id^=item-tag-]').keyup(function(e) {
if(e.keyCode == 188) {
var newTag = $(this).val().slice(0,-1);
$(this).val('');
$(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
}
});
在实际最终的结果是让自动完成工作有多重选择。如果有人有任何建议,他们将受到欢迎。
解决方案
添加$(this).val(''); return false;
您select
函数的末尾以清除字段和取消事件:)
此将防止被更新的值。你可以看到它是如何工作围绕线109 这里
在那里检查虚假的代码具体是:
if ( false !== self._trigger( "select", event, { item: item } ) ) {
self.element.val( item.value );
}
其他提示
而不是返回假的,你也可以使用event.preventDefault()。
select: function(event, ui){
var newTag = $(this).val();
$(this).val("");
$(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
event.preventDefault();
}
返回假需要选择回调中,清空该字段。 但如果你想再次控制领域,即设置的值,你必须调用一个新的功能,打破UI出来。
也许你有一个提示值,例如:
var promptText = "Enter a grocery item here."
设置为元素的VAL。 (焦点,我们设置为“”)。
$("selector").val(promptText).focus(function() { $(this).val(''); }).autocomplete({
source: availableTags,
select: function(){
$(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
foo.resetter(); // break out //
return false; //gives an empty input field //
}
});
foo.resetter = function() {
$("selector").val(promptText); //returns to original val
}
这很适合我。
选择事件之后,我使用的事件的变化。
change:function(event){
$("#selector").val("");
return false;
}
我是初学者!
尝试此
select: function (event, ui) {
$(this).val('');
return false;
}
我只是解决了它迫使失去焦点:
$('#select_id').blur();
printResult();
不隶属于 StackOverflow