Develop Reference

How to add blank value or select text to dropdown list on this table?

How to add "Select" value to dropdown list on my table? I want something like this. See screenshot below.
Here is my code:
http://live.datatables.net/xedexixi/1/edit

Something like this?
$('.cb-dropdown').prepend('<li><label><span>Select: </span><input type="checkbox" value="Select"></label></li>');
$(document).ready(function() {
function cbDropdown(column) {
return $('<ul>', {
'class': 'cb-dropdown'
}).appendTo($('<div>', {
'class': 'cb-dropdown-wrap'
}).appendTo(column));
}
$('#example').DataTable({
initComplete: function() {
this.api().columns().every(function() {
var column = this;
var ddmenu = cbDropdown($(column.header()))
.on('change', ':checkbox', function() {
var active;
var vals = $(':checked', ddmenu).map(function(index, element) {
active = true;
return $.fn.dataTable.util.escapeRegex($(element).val());
}).toArray().join('|');
column
.search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
.draw();
// Highlight the current item if selected.
if (this.checked) {
$(this).closest('li').addClass('active');
} else {
$(this).closest('li').removeClass('active');
}
// Highlight the current filter if selected.
var active2 = ddmenu.parent().is('.active');
if (active && !active2) {
ddmenu.parent().addClass('active');
} else if (!active && active2) {
ddmenu.parent().removeClass('active');
}
});
column.data().unique().sort().each(function(d, j) {
var // wrapped
$label = $('<label>'),
$text = $('<span>', {
text: d
}),
$cb = $('<input>', {
type: 'checkbox',
value: d
});
$text.appendTo($label);
$cb.appendTo($label);
ddmenu.append($('<li>').append($label));
});
});
$('.cb-dropdown').prepend('<li><label><span>Select: </span><input type="checkbox" value="Select"></label></li>');
}
});
});

Select mutiple options from jquery autocomplete with checkboxes

I am working with jquery autocomplete .
I am trying following code
Html
<textarea class="search-element"></textarea>
Script
var data = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C++",
"Clojure",
"COBOL",
"ColdFusion"
];
$(function () {
var $this;
var singleSelectOptions = {
source: function (request, response) {
response($.map(data, function (item) {
return {
label: item,
}
}));
},
select: function (event, ui) {
$($this).autocomplete("close");
$($this).val($($this).val() + '\n' + ui.label)
},
minLength: 0,
open: function () {
$("ul.ui-menu").width($(this).innerWidth());
}
}
$(document).find('textarea[class*="search-element"]').live('keydown', function () {
$($this).autocomplete(singleSelectOptions);
}).live('focus', function () {
$this = $(this);
var text = $this.val();
if (text == '') {
$($this).autocomplete(singleSelectOptions);
$($this).autocomplete("search");
}
});
})
By using this code I can select only one option at a time
but i need to select multiple options using checkbox
Right now my result is showing like this
But I want result as follows and when we check box then autocomplete should not be close and selected options should be fill in related textarea with comma separation and when we uncheck checkbox then that option should be remove from textarea. And I can update text of textarea.
Here is my fiddle

I have tried following code and my goal is achieved with this.
Html
<textarea class="multiselect-element"></textarea>
Script
var data = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C++",
"Clojure",
"COBOL",
"ColdFusion"
];
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
function bindAutoComplete(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('<input type="checkbox"' + checked + '/>' + item.label + '')
.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");
return false;
},
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(", ");
}
return false;
},
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");
})
})
Here is my working fiddle

http://www.jqueryscript.net/demo/Multi-Select-Autocomplete-Dropdown-Plugin-For-jQuery-MSelectDialogBox/
see --> reffer to second demo

Redactor: dropdown plugin

I try to implement a colorpicker-fontcolor plugin to redactor-js.
http://jsfiddle.net/ped7txq6/
$(function(){
//plugin
$.Redactor.prototype.fontcolor = function()
{
return {
init: function()
{
var name = 'fontcolor';
var rdctr = this;
var button = this.button.addAfter('fontsize', name, this.lang.get(name));
var $dropdown = this.button.addDropdown(button);
$dropdown.css('min-width', '199px');
this.fontcolor.buildPicker($dropdown, name);
button.on('click', function(){
rdctr.selection.save();
});
},
buildPicker: function($dropdown, name)
{
var rdctr = this;
var $picker = $('<p>').ColorPicker({
flat: true,
onSubmit: function(hsb, hex, rgb, el){
// $(el).val('#' + hex);
// $(el).ColorPickerHide();
},
onChange: function(hsb, hex, rgb, el){
// $(el).val(hex);
rdctr.fontcolor.set('color', '#' + hex);
}
}).bind('keyup', function(){
//$(rdctr).ColorPickerSetColor(rdctr.value);
// rdctr.fontcolor.set('color', '#' + hex);
});
$dropdown.append($picker);
},
set: function(rule, type)
{
console.log('_', type);
//selected color
this.selection.restore();
this.inline.format('span', 'style', rule + ':' + type + ';');
},
remove: function(rule)
{
//removed color
// this.inline.removeStyleRule(rule);
}
};
};
//editor
$('#redactor').redactor({
plugins: ['fontcolor'],
focus: true,
changeCallback: function()
{
},
blurCallback: function()
{
}
});
});
I have two problem:
When I clicked in the dropdown on the colorpicker, the dropdown is close,
Sometimes when I selected the color, the text in the editor get the default color, not actual color from colorpicker.
Anyone can help in these?
Thanks a lot!

Check the font color plugin for Redactor

Jquery Autocomplete not supported by keyboard

Autocomplete is not working for keyboard keys but it is working for mouse.i couldnot select item by arrow keys and enter key.
Here is my code. please suggest me any idea. and how to change my selected item background colour in input field?
var triggered = false;
var trigger = "#";
jQuery(".inputbox").autocomplete({
source: function( request, response ) {
var term = request.term;
jQuery.ajax({
url: "/home/friends?q="+term,
dataType: "json",
success: function( data ) {
response( $.map( data, function( item ) {
// alert(item.value);
return {
label: item.name,
value: item.name }
}));
}
});
},
search: function() {
if (!triggered) {
return false;
}
},
select: function(event, ui) {
var text = this.value;
var pos = text.lastIndexOf(trigger);
this.value = text.substring(0, pos + trigger.length) +
ui.item.value;
triggered = false;
return false;
},
focus: function() { return false; },
delay: 0,
minLength: 0,
allowNewTags: false
}).bind("keyup", function() {
var text = this.value;
var len = text.length;
var last;
var query;
var index;
if (triggered) {
index = text.lastIndexOf(trigger);
query = text.substring(index + trigger.length);
$(this).autocomplete("search", query);
}
else if (len >= trigger.length) {
last = text.substring(len - trigger.length);
triggered = (last === trigger);
}
});

I recommend to use https://github.com/ghiden/angucomplete-alt. It have this feature implemented by default.

Using the same ID for multiple combo-boxes?

I need to assign an ID to jquery autocomplete Combobox but i have multiple jquery autocomplete Combobox in page
i am using this line input.attr("id", "anyThng"); to assign ID to jquery autocomplete Combobox
http://jqueryui.com/autocomplete/#combobox
code for reference:
(function($) {
$.widget("ui.combobox", {
_create: function() {
var input, self = this, select = this.element.hide(), selected = select.children(":selected"), value = selected.val() ? selected.text() : "", wrapper = this.wrapper = $("<span>").addClass("ui-combobox").insertAfter(select);
input = $("<input>")
// .id("something")
.appendTo(wrapper)
.val(value)
.addClass("ui-state-default ui-combobox-input")
.autocomplete({
delay: 0,
minLength: 0,
source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(select.children("option").map(function() {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
// alert(text);
return {
label: text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
$.ui.autocomplete.escapeRegex(request.term) +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>"),
value: text,
option: this
};
}));
// alert(input.val());
// alert(input.attr('id'));
// input.attr("id", this.id);
// alert(input.attr('id'));
},
select: function(event, ui) {
ui.item.option.selected = true;
self._trigger("selected", event, {
item: ui.item.option
});
},
change: function(event, ui) {
//alert(input[0].id);
// alert($(event.target)[0].id);
// alert($(this).attr('id'));
// alert($("#something").attr('id'));
// alert(event.target.id);
// alert($(".ui-state-default ui-combobox-input ui-autocomplete-input").attr("id"));
if (!ui.item) {
xT = $(this).val();
var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
valid = false;
select.children("option").each(function() {
if ($(this).text().match(matcher)) {
this.selected = valid = true;
return false;
}
});
if (!valid) {
xT = $(this).val();
if (countryID == '' || countryID == undefined) {
$(".selPnext").hide();
$("#Tr3").hide();
}
else {
// Checking saudi Province
$("#status").val("21");
if (countryID == 1500000090) {
if (comissionarY == '' || comissionarY == undefined) {
//comissionary
if (ProcvID == '' || ProcvID == undefined) {
$(".selPnext").hide();
$("#Tr3").hide();
}
else {
$(".selPnext").show();
$("#Tr3").show();
$("#Td3").html("Comissionary Status (20/21)");
$("#status").val("21");
}
}
else {
//center
if (ProcvID == '' || ProcvID == undefined) {
$(".selPnext").hide();
$("#Tr3").hide();
}
else {
$(".selPnext").show();
if (countryID == 1500000090) {
$("#Td3").html("Center Status (22/23)");
$("#status").val("22");
$("#Tr3").show();
}
else {
$("#Tr3").hide();
}
}
}
}
else {
if (countryID != 1500000090) {
$(".selPnext").show();
$("#Tr3").show();
}
//$("#Div1").css({ width: "400px" });
}
}
// remove invalid value, as it didn't match anything
// $(this).val("");
// select.val("");
// input.data("autocomplete").term = "";
return false;
}
}
}
})
//.addClass("ui-widget ui-widget-content ui-corner-left");
input.data("autocomplete")._renderItem = function(ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
$("<a>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.appendTo(wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-combobox-toggle")
.click(function() {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// work around a bug (likely same cause as #5265)
$(this).blur();
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
},
destroy: function() {
this.wrapper.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
//added n cam b deleted
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
var xT;
function myVal() {
return xT;
}
$(function() {
//$("#tryy").combobox();
//$("#country").combobox();
});

ID's are supposed to be unique, why don't you change them to share the same Class and then use that in your function.