I'm trying to add a text placeholder to my selectbox, but all the options disappear when I try to do so. Can someone help me with this issue?
Here is the code snippet I'm using:
window.onload = function () {
$('#slide').editableSelect({ effects: 'slide' });
$('#html').editableSelect();
$('#onselect').editableSelect({
onSelect: function (element) {
$('#afterSelect').html($(this).val());
}
});
}input.es-input {
padding-left:20px!important;
direction:rtl;
background-color:#FFF !important;
border:1px solid #ccc !important;
height:40px !important;cursor:pointer;
background-position:5% !important;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) left center no-repeat
}
.es-list {
position:absolute;
padding:0;
margin:0;
border:1px solid #d1d1d1;
display:none;
z-index:1000;
background:#fff;
max-height:160px;
overflow-y:auto;-moz-box-shadow:0 2px 3px #ccc;-webkit-box-shadow:0 2px 3px #ccc;
box-shadow:0 2px 3px #ccc
}
.es-list li{
display:block;
height:45px;
padding:0 !important;
margin:0 !important;
width:100%;
}
.es-list li.selected {
background:#2476bb;color:#fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Custom-Filterable-Select-Box-Editable-Select/source/jquery.editable-select.js"></script>
<html>
<head>
</head>
<body>
<select id="slide">
<option selected="true" disabled>one</option>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</body>
</html>