Clear form field after select for jQuery UI Autocomplete
I'm developing a form, and using jQuery UI Autocomplete. When the开发者_如何学C user selects an option, I want the selection to pop into a span appended to the parent <p>
tag. Then I want the field to clear rather than be populated with the selection.
I have the span appearing just fine, but I can't get the field to clear.
How do you cancel jQuery UI Autocomplete's default select action?
Here is my code:
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>");
}
});
Simply doing $(this).val("");
doesn't work. What is maddening is that almost the exact function works fine if I ignore autocomplete, and just take action when the user types a comma as such:
$('[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>");
}
});
The real end result is to get autocomplete to work with multiple selections. If anybody has any suggestions for that, they would be welcome.
Add $(this).val(''); return false;
to the end of your select
function to clear the field and cancel the event :)
This will prevent the value from being updated. You can see how it works around line 109 here.
The code in there checks for false specifically:
if ( false !== self._trigger( "select", event, { item: item } ) ) {
self.element.val( item.value );
}
Instead of return false you could also use event.preventDefault().
select: function(event, ui){
var newTag = $(this).val();
$(this).val("");
$(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
event.preventDefault();
}
return false is needed within the select callback, to empty the field. but if you want to again control the field, i.e. set the value, you have to call a new function to break out of the ui.
Perhaps you have a prompt value such as :
var promptText = "Enter a grocery item here."
Set it as the element's val. (on focus we set to '').
$("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
}
It works well for me.
After select event,I used event change.
change:function(event){
$("#selector").val("");
return false;
}
I'm a beginner!
Try This
select: function (event, ui) {
$(this).val('');
return false;
}
I just solved it forcing to lose focus:
$('#select_id').blur();
printResult();
精彩评论