How to bind to selection from autocomplete?
I want to bind to the event after selection element from autocomplete
Here is my script with autocomplete:
<script type="text/javascript">
$(document).ready(function () {
var url = '@Url.Action("TagName", "Tag")';
$('#TagModel_Name').autocomplete(url, {
minChars: 1,
multiple: true,
formatResult: function (row) {
return row[0].replace(/(<.+?>)/gi, '');
}
开发者_开发百科 });
});
</script>
And I want add some label at bottom page with text of selected item.
So :
- I type a to '#TagModel_Name "a"
- I select "austria"
now text of '#TagModel_Name i "austria" 4. event fires, and there would be method like
var newlabel=$'(' $selected_tag') $("'#TagModel_Name:last").after($newlabel);
I'm using
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.autocomplete.js")"></script>
and asp.net-mvc 3 razor
Sorry for my bad english. I hope you understand what I want.
Best regards
You should use the select event. Something like this might work: (i don't understand what exactly you want to do afterwards, if you provide your markup i might help)
$('#TagModel_Name').autocomplete(url, {
minChars: 1,
multiple: true,
formatResult: function (row) {
return row[0].replace(/(<.+?>)/gi, '');
},
select: function(event, ui){
//here ui.item refers to the selected item.
var div = $('<div>', {class: 'tag'});
div.html(ui.item.label);
$('#demo').after(div);
}
});
});
EDIT - i provided a basic solution for what you asked in the comment: look at this fiddle. http://jsfiddle.net/e97QP/
精彩评论