javascript - chosen select bootstrap
Complemento de Jquery Chosen: lista dinámica de poblados por Ajax (9)
Estoy intentando construir mi menú desplegable usando el complemento Elegido para selección múltiple . Esto es para el comportamiento en el que me baso:
Entonces, en lugar de tener 3 harcoded <opción> en mi selección. Quiero que esta lista sea el valor de una matriz json poblada por una solicitud ajax. Esto se activará por autocompletar.
Entonces, si el usuario escribe "auto", estoy enviando la carta a través de una llamada ajax, y obtengo una matriz como esta:
[{"id": "2489", "nombre": "carrie"}, {"id": "2490", "nombre": "Caroline"}, {"id": "2491", "nombre": "Carole"}]
El código:
$(function() {
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
$(''.chzn-choices input'').autocomplete({
source: function( request, response ) {
$.ajax({
url: "/change/name/autocomplete/"+request.term+"/",
dataType: "json",
success: function( data ) {
response( $.map( data, function( item ) {
$(''ul.chzn-results'').append(''<li class="active-result">'' + item.name + ''</li>'');
}
});
}
});
Resultado:
Escribo "coche", en el menú desplegable obtengo "Sin resultado para automóvil" y luego tengo todos mis resultados, como quiero.
1. Por qué recibo el mensaje "Sin resultado", porque puedo ver en mi json array y dentro de mi lista que estoy obteniendo resultados.
-----------------------------
Cuando borro "car" e ingreso "sam". Los resultados para "sam" se muestran después de los resultados del "automóvil". (Básicamente, veo el resultado para ambos, en lugar de solo tener el resultado de mi búsqueda actual)
2. ¿Supongo que debo borrar el ul en keyUp? Pensé que el plugin ya estaba haciendo eso
-----------------------------
Cuando hago clic en un nombre para seleccionarlo y agregarlo a la selección, obtengo un error de javascript dentro del archivo elegido.js
el artículo no está definido
"item.selected = true;" línea 732
el enlace al complemento: http://harvesthq.github.com/chosen/chosen/chosen.jquery.js
y no agrega nada dentro de la selección.
3. No tengo idea de por qué está sucediendo esto
-----------------------------
¿Tienen alguna idea de lo que estoy haciendo algo mal? ¡Estoy completamente atrapado aquí ...!
Ah, y por cierto, no me importa cambiar la fuente del complemento, ya que es el único lugar donde lo estoy usando ...
Esto podría ser útil. Solo tienes que activar un evento.
$("#DropDownID").trigger("liszt:updated");
Donde "DropDownID" es ID de.
Más información en. http://harvesthq.github.com/chosen/
prueba esto:
$(''.chzn-choices input'').autocomplete({
source: function( request, response ) {
$.ajax({
url: "/change/name/autocomplete/"+request.term+"/",
dataType: "json",
beforeSend: function(){$(''ul.chzn-results'').empty();},
success: function( data ) {
response( $.map( data, function( item ) {
$(''ul.chzn-results'').append(''<li class="active-result">'' + item.name + ''</li>'');
}));
}
});
}
});
Como sugirió Vicky, Select2 viene con las características de AJAX incorporadas y parece un gran complemento.
Si no quieres cambiar de Elegido, prueba AJAX-Elegido https://github.com/meltingice/ajax-chosen
El complemento Chosen no actualiza automáticamente su lista de opciones cuando cambian los elementos de OPCIÓN en el DOM. Tienes que enviar un evento para activar la actualización:
Pre Elegido 1.0: $(''.chzn-select'').trigger("liszt:updated");
Elegido 1.0 $(''.chosen-select'').trigger("chosen:updated");
Si administra dinámicamente los elementos de OPCIÓN, tendrá que hacer esto cada vez que cambien las OPCIONES. La forma de hacer esto variará: en AngularJS, pruebe algo como esto:
$scope.$watch(
function() {
return element.find(''option'').map(function() { return this.value }).get().join();
},
function() {
element.trigger(''liszt:updated'');
}
}
La respuesta de Ashirvad ya no funciona. Tenga en cuenta que el nombre de clase cambia y usa el elemento de opción en lugar del elemento li . Actualicé mi respuesta para no usar el evento "éxito" en desuso, sino que opté por .done ():
$(''.chosen-search input'').autocomplete({
minLength: 3,
source: function( request, response ) {
$.ajax({
url: "/some/autocomplete/url/"+request.term,
dataType: "json",
beforeSend: function(){ $(''ul.chosen-results'').empty(); $("#CHOSEN_INPUT_FIELDID").empty(); }
}).done(function( data ) {
response( $.map( data, function( item ) {
$(''#CHOSEN_INPUT_FIELDID'').append(''<option value="blah">'' + item.name + ''</option>'');
}));
$("#CHOSEN_INPUT_FIELDID").trigger("chosen:updated");
});
}
});
La API elegida ha cambiado mucho.
Si ninguna de las soluciones dadas funciona para usted, puede probar esta: https://github.com/goFrendiAsgard/gofrendi.chosen.ajaxify
Aquí está la función:
// USAGE:
// $(''#some_input_id'').chosen();
// chosen_ajaxify(''some_input_id'', ''http://some_url.com/contain/'');
// REQUEST WILL BE SENT TO THIS URL: http://some_url.com/contain/some_term
// AND THE EXPECTED RESULT (WHICH IS GOING TO BE POPULATED IN CHOSEN) IS IN JSON FORMAT
// CONTAINING AN ARRAY WHICH EACH ELEMENT HAS "value" AND "caption" KEY. EX:
// [{"value":"1", "caption":"Go Frendi Gunawan"}, {"value":"2", "caption":"Kira Yamato"}]
function chosen_ajaxify(id, ajax_url){
console.log($(''.chosen-search input'').autocomplete);
$(''div#'' + id + ''_chosen .chosen-search input'').keyup(function(){
var keyword = $(this).val();
var keyword_pattern = new RegExp(keyword, ''gi'');
$(''div#'' + id + ''_chosen ul.chosen-results'').empty();
$("#"+id).empty();
$.ajax({
url: ajax_url + keyword,
dataType: "json",
success: function(response){
// map, just as in functional programming :). Other way to say "foreach"
$.map(response, function(item){
$(''#''+id).append(''<option value="'' + item.value + ''">'' + item.caption + ''</option>'');
});
$("#"+id).trigger("chosen:updated");
$(''div#'' + id + ''_chosen'').removeClass(''chosen-container-single-nosearch'');
$(''div#'' + id + ''_chosen .chosen-search input'').val(keyword);
$(''div#'' + id + ''_chosen .chosen-search input'').removeAttr(''readonly'');
$(''div#'' + id + ''_chosen .chosen-search input'').focus();
// put that underscores
$(''div#'' + id + ''_chosen .active-result'').each(function(){
var html = $(this).html();
$(this).html(html.replace(keyword_pattern, function(matched){
return ''<em>'' + matched + ''</em>'';
}));
});
}
});
});
}
Aquí está tu HTML:
<select id="ajax_select"></select>
Y aquí está tu javasscript:
// This is also how you usually use chosen
$(''#ajax_select'').chosen({allow_single_deselect:true, width:"200px", search_contains: true});
// And this one is how you add AJAX capability
chosen_ajaxify(''ajax_select'', ''server.php?keyword='');
Para obtener más información, consulte https://github.com/goFrendiAsgard/gofrendi.chosen.ajaxify#how-to-use
Si tiene dos o más selecciones y usa la respuesta de Steve McLenithan, intente reemplazar la primera línea con:
$(''#CHOSENINPUTFIELDID_chosen > div > div input'').autocomplete({
no eliminar el sufijo: _chosen
La respuesta elegida no está actualizada, lo mismo aplica al complemento meltingice / ajax-chosen.
Con el plugin Select2 obtuve muchos errores que no puedo resolver.
Aquí mi respuesta para esta pregunta.
Integré mi solución con el activador de función después del tipo de usuario. Gracias a esta respuesta: https://.com/a/5926782/4319179 .
//setup before functions
var typingTimer; //timer identifier
var doneTypingInterval = 2000; //time in ms (2 seconds)
var selectID = ''YourSelectId''; //Hold select id
var selectData = []; // data for unique id array
//on keyup, start the countdown
$(''#'' + selectID + ''_chosen .chosen-choices input'').keyup(function(){
// Change No Result Match text to Searching.
$(''#'' + selectID + ''_chosen .no-results'').html(''Searching = "''+ $(''#'' + selectID + ''_chosen .chosen-choices input'').val() + ''"'');
clearTimeout(typingTimer); //Refresh Timer on keyup
if ($(''#'' + selectID + ''_chosen .chosen-choices input'').val()) {
typingTimer = setTimeout(doneTyping, doneTypingInterval); //Set timer back if got value on input
}
});
//user is "finished typing," do something
function doneTyping () {
var inputData = $(''#'' + selectID + ''_chosen .chosen-choices input'').val(); //get input data
$.ajax({
url: "YourUrl",
data: {data: inputData},
type:''POST'',
dataType: "json",
beforeSend: function(){
// Change No Result Match to Getting Data beforesend
$(''#'' + selectID + ''_chosen .no-results'').html(''Getting Data = "''+$(''#'' + selectID + ''_chosen .chosen-choices input'').val()+''"'');
},
success: function( data ) {
// iterate data before append
$.map( data, function( item ) {
// matching data eg: by id or something unique; if data match: <option> not append - else: append <option>
// This will prevent from select the same thing twice.
if($.inArray(item.attr_hash,selectData) == -1){
// if not match then append in select
$(''#'' + selectID ).append(''<option id="''+item.id+''" data-id = "''+item.id+''">'' + item.data + ''</option>'');
}
});
// Update chosen again after append <option>
$(''#'' + selectID ).trigger("chosen:updated");
}
});
}
// Chosen event listen on input change eg: after select data / deselect this function will be trigger
$(''#'' + selectID ).on(''change'', function() {
// get select jquery object
var domArray = $(''#'' + selectID ).find(''option:selected'');
// empty array data
selectData = [];
for (var i = 0, length = domArray.length; i < length; i++ ){
// Push unique data to array (for matching purpose)
selectData.push( $(domArray[i]).data(''id'') );
}
// Replace select <option> to only selected option
$(''#'' + selectID ).html(domArray);
// Update chosen again after replace selected <option>
$(''#'' + selectID ).trigger("chosen:updated");
});
Puede llenar dinámicamente una lista a través de AJAX utilizando el excelente complemento Select2 . De mi respuesta a "¿Hay alguna forma de agregar elementos dinámicamente ajax a través del plugin jquery elegido?" :
Eche un vistazo al limpio complemento Select2 , que se basa en Chosen y admite fuentes de datos remotos (también conocidos como datos AJAX) y desplazamiento infinito .