search by @ symbol in autocomplete
<div id="post_content" contenteditable="true" class="post_content_textarea">
</div>
<script>
var availableTags = <%= raw @users %>;
function split(val) {
return val.split(/@\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$(".post_content_textarea")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
}).autocomplete({
minLength: 0,
source: function(request, response) {
var term = request.term,
results = [];
if (term.indexOf("@") >= 0) {
term = extractLast(request.term);
if (term.length > 0) {
results = $.ui.autocomplete.filter(
availableTags, term.trim());
} else {
results = ['Start typing...'];
}
}
response(results);
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split($(this).html());
// remove the current input
terms.pop();
// add the selected item
terms.push("<span class='tagged_uid' style='color:red' id="+ui.item.value+">"+ui.item.label+"</span>");
// add placeholder to get the comma-and-space at the end
terms.push(" ");
$(this).html(terms.join(""));
return false;
}
});
</script>
Comments
Post a Comment