Select Mutiple Options From Jquery Autocomplete With Checkboxes
I am working with jquery autocomplete . I am trying following code Html Script var data = [ 'ActionScript',
Solution 1:
I have tried following code and my goal is achieved with this.
Html
<textareaclass="multiselect-element"></textarea>
Script
var data = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C++",
"Clojure",
"COBOL",
"ColdFusion"
];
functionsplit(val) {
return val.split(/,\s*/);
}
functionextractLast(term) {
returnsplit(term).pop();
}
functionbindAutoComplete(ele, options) {
var text = ele.val();
text = text == null || text == undefined ? "" : text;
$(ele).autocomplete(options).data("autocomplete")._renderItem = function (ul, item) {
var checked = (text.indexOf(item.label + ', ') > -1 ? 'checked' : '');
return $("<li></li>")
.data("item.autocomplete", item)
.append('<a href="javascript:;"><input type="checkbox"' + checked + '/>' + item.label + '</a>')
.appendTo(ul);
};
}
$(function () {
var $this;
var multiSelectOptions = {
minLength: 0,
source: function (request, response) {
response($.map(data, function (item) {
return {
label: item
}
}));
},
focus: function () {
// prevent value inserted on focus//$($this).autocomplete("search");returnfalse;
},
select: function (event, ui) {
var text = $this.val();
text = text == null || text == undefined ? "" : text;
var checked = (text.indexOf(ui.item.value + ', ') > -1 ? 'checked' : '');
if (checked == 'checked') {
this.value = this.value.replace(ui.item.value + ', ', '')
}
else {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
}
returnfalse;
},
open: function () {
$("ul.ui-menu").width($(this).innerWidth());
}
}
$(document).find('textarea[class*="multiselect-element"]').live('keydown', function () {
bindAutoComplete($this, multiSelectOptions);
}).live('focus', function () {
$this = $(this);
var text = $this.val();
bindAutoComplete($this, multiSelectOptions);
$($this).autocomplete("search");
})
})
Solution 2:
see --> reffer to second demo
Post a Comment for "Select Mutiple Options From Jquery Autocomplete With Checkboxes"