searching like facebook tag in autocomplete
<div id="post_content" contenteditable="true" class="post_content_textarea">
</div>
<script>
var availableTags = <%= raw @users %>;
var availableTags_category = <%= raw @categories %>;
function split(val) {
return val.split(/@\s*/);
}
function split2(val) {
return val.split(/#\s*/);
}
function extractLast(term) {
return split(term).pop();
}
function extractLast2(term) {
return split2(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...'];
}
}
if (term.indexOf("#") >= 0) {
term = extractLast2(request.term);
if (term.length > 0) {
results = $.ui.autocomplete.filter(
availableTags_category, term.trim());
} else {
results = ['Start typing...'];
}
}
response(results);
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
if (ui.item.state == "user"){
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;
}
else{
var terms2 = split2($(this).html());
// remove the current input
terms2.pop();
// add the selected item
terms2.push("<span class='tagged_category'
style='color:green'
id="+ui.item.value+">"+ui.item.label+"</span>");
// add placeholder to get the comma-and-space at the end
terms2.push(" ");
$(this).html(terms2.join(""));
//this.value = terms2.join("");
return false;
}
}
});
$('.event_submit').click(function(){
var user_ids = [];
var categories_ids = [];
$(".post_content_textarea span").each(function(index, element){
user_ids.push(element.id);
});
$(".post_content_textarea span.tagged_category").each(function(index, element){
categories_ids.push(element.id);
});
var des = $('.post_content_textarea').html()
$('#event_description').val(des)
$('.append_tag').html('<input type="hidden"
class="hidden_tag_class" id = "hidden_tag" name="tag"
value="'+user_ids+'">')
$('.append_category').html('<input type="hidden" name="tag_category" value="'+categories_ids+'">')
})
</script>
Comments
Post a Comment