javascript - ¿Cómo cambiar el marcador de posición del menú desplegable selectize.js?
jquery dynamic (9)
Asegúrese de usar una etiqueta de select para selectize .
Estaba teniendo el mismo problema, causado por el uso de una entrada en su lugar. selectize funcionó también, pero el atributo placeholder no se mostraba. Cuando cambié a una select , comenzó a funcionar
<select type="text" placeholder="Type words of the article..."></select>
Quiero cambiar el marcador de posición de un menú desplegable creado por selectize.js cuando el menú desplegable principal cambia su selección para cargar las opciones del menú desplegable cuyo marcador de posición debe modificarse. No hay un método para hacer esto en la documentación.
Necesitas dos cosas:
- agregue
<option></option>vacía como la primera etiqueta de opción en la selección. - agregar la tecla de
placeholderparaselectizellamada
No estoy seguro si selectize sigue cambiando su código o si todos los demás en este hilo simplemente sonaron, pero todas estas respuestas parecen estar equivocadas individualmente, pero si combinas las partes correctas de cada respuesta terminas con esto que funciona para mí.
var textHandler = function(name) {
return function() {
if(name == ''focus''){
jQuery("select#myid + .selectize-control").find("input:text").prop({"placeholder": ""});
}
};
};
jQuery(''#sf159_textsearchtextsearch'').selectize({
closeAfterSelect: true,
hideSelected : true,
createOnBlur : true,
openOnFocus : true,
maxOptions : 10,
persist : true,
placeholder : "Neighborhood, Street, School, Zip, MLS",
plugins : [''remove_button''],
valueField : ''id'',
labelField : ''text'',
searchField : ''value'',
options : [],
create : false,
render : {
option: function (item, escape) {
//console.log(item);
var address = '''';
var keyword = '''';
var tx = item.text.split('','');
for (var i = 0, n = tx.length; i < n; i++) {
address += ''<span class="span4">'' + escape(tx[i]) + ''</span>'';
}
var template = ''<div>'' +
''<div class="row-fluid"> '' + address + '' </div>'' +
''</div>'';
return template;
}
},
load : searchHandler,
onKeydown : keyHandler,
onDelete : deleteHandler,
onFocus : textHandler(''focus''),
});
Puede actualizar el marcador de posición configurando selectize.settings.placeholder y luego llamando a selectize.updatePlaceholder () .
$(document).ready(function() {
var s = $(''#input-tags'').selectize({
persist: false,
createOnBlur: true,
create: true,
placeholder: ''start placeholder''
})[0].selectize;
$(''#updatePlaceholder'').click(function() {
s.settings.placeholder = ''new placeholder'';
s.updatePlaceholder();
});
});
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Selectize setting placeholder</h1>
<input type="text" id="input-tags" value="">
<button id="updatePlaceholder">change</button>
</body>
</html>
Puede especificar un marcador de posición para elementos select agregando un elemento de option vacío dentro de la etiqueta de selección. Aquí hay un ejemplo:
<select name="color" required>
<option value=""> Select a color </option>
<option value="1"> Lavender </option>
<option value="2"> Eggplant </option>
<option value="3"> Cool grey </option>
<option value="4"> Bitter lemon </option>
</select>
Puede especificar una clave de placeholder como parte del objeto de opciones al inicializar. No pude encontrar la opción en la documentación y solo la encontré explorando el código.
//init selectize
$(function() {
$(''select'').selectize({
placeholder: ''Click here to select ...'',
});
});
Tuve un problema similar: lo frustrante es que haría algo como esto:
$("selectize-input input[placeholder]").attr(''placeholder'',''Hello World!'');
Luego, solo después de cambiar el foco, representaría el nuevo texto de marcador de posición. Resulta que por cualquier razón (probablemente una buena) selectize aplica un ancho a esta entrada.
Solución final:
$(".selectize-input input[placeholder]").attr(''placeholder'',''Hello World!'');
$(".selectize-input input[placeholder]").attr("style", "width: 100%;");
selectize.js creará una input debajo de la select . Esta input tendrá la clase .selectize-control .
Puede reemplazar el placeholder de placeholder de este campo de input con jQuery.
Puedes hacer algo como:
$(".selectize-control").attr(''placeholder'',''Hello World!'');
Si desea un ejemplo que funcione, necesitaré más información sobre su código.
$(''select#my-dropdown + .selectize-control'').find(''.selectize-control-input'').prop({''placeholder'': ''Placeholder Text''});