Watermark on dropdownlist

Question

Hi,

 

I am using Editable dropdownlist and bind with database.

I want a watermark like Textbox on my dropdownlist.

 

Below is my design part with jquery 

 

<!-- Editable Dropdown -->

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link href="https://jqueryui.com/resources/demos/style.css" rel="stylesheet" />

<style>

.custom-combobox {

position: relative;

display: inline-block;

}

.custom-combobox-toggle {

position: absolute;

top: 0;

bottom: 0;

margin-left: -1px;

padding: 0;

width: 50%;

}

.custom-combobox-input {

margin: 0;

padding: 5px 10px;

}

.ui-state-default,

.ui-widget-content .ui-state-default,

.ui-widget-header .ui-state-default {

background: #fbfbfb;

border: 1px solid #cfcdcd;

color: #87929c;

float: left;

font-family: 'Open Sans', sans-serif;

font-size: 14px;

font-weight: 600;

margin: 0 10px 0 0;

padding: 12px 10px 12px 50px;

width: 100%;

border-radius:5px;

}

/* Corner radius */

.ui-corner-all,

.ui-corner-top,

.ui-corner-left,

.ui-corner-tl {

border-top-left-radius: 0px !important;

}

.ui-corner-all,

.ui-corner-top,

.ui-corner-right,

.ui-corner-tr {

border-top-right-radius: 0px !important;

}

.ui-corner-all,

.ui-corner-bottom,

.ui-corner-left,

.ui-corner-bl {

border-bottom-left-radius: 0px !important;

}

.ui-corner-all,

.ui-corner-bottom,

.ui-corner-right,

.ui-corner-br {

border-bottom-right-radius: 0px !important;

}

</style>

<script>

(function($) {

$.widget("custom.combobox", {

_create: function() {

this.wrapper = $("<span>")

.addClass("custom-combobox")

.insertAfter(this.element);

this.element.hide();

this._createAutocomplete();

this._createShowAllButton();

},

_createAutocomplete: function() {

var selected = this.element.children(":selected"),

value = selected.val() ? selected.text() : "";

this.input = $("<input>")

.appendTo(this.wrapper)

.val(value)

.attr("title", "")

.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")

.autocomplete({

delay: 0,

minLength: 0,

source: $.proxy(this, "_source")

})

.tooltip({

tooltipClass: "ui-state-highlight"

});

this._on(this.input, {

autocompleteselect: function(event, ui) {

ui.item.option.selected = true;

this._trigger("select", event, {

item: ui.item.option

});

},

autocompletechange: "_removeIfInvalid"

});

},

_source: function(request, response) {

var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");

response(this.element.children("option").map(function() {

var text = $(this).text();

if (this.value && (!request.term || matcher.test(text)))

return {

label: text,

value: text,

option: this

};

}));

},

_removeIfInvalid: function(event, ui) {

// Selected an item, nothing to do

if (ui.item) {

return;

}

// Search for a match (case-insensitive)

var value = this.input.val(),

valueLowerCase = value.toLowerCase(),

valid = false;

this.element.children("option").each(function() {

if ($(this).text().toLowerCase() === valueLowerCase) {

this.selected = valid = true;

return false;

}

});

// Found a match, nothing to do

if (valid) {

return;

}

// Remove invalid value

this.input

.val("")

.attr("title", value + " didn't match any item")

.tooltip("open");

this.element.val("");

this._delay(function() {

this.input.tooltip("close").attr("title", "");

}, 2500);

this.input.autocomplete("instance").term = "";

},

_destroy: function() {

this.wrapper.remove();

this.element.show();

}

});

})(jQuery);

$("#combobox").focus(function () { $(this).select(); });

$(function () {

$("#combobox").combobox();

$("#toggle").click(function() {

$("#combobox").toggle();

});

});

</script>