0

Tengo un input donde filtro los datos de un datalist, mientras se filtra me gustaría solo mostrar un máximo 10 o 5 items, ya que me despliega una lista muy larga de datos en pantalla.
Este es mi ejemplo y exede el numero de datos que quiero mostrar:

<input type="text" id="myprod" onblur="" list="listprod" class="form-control " placeholder="Buscar Producto">
<datalist id="listprod">
    <option id="10212124545" data-codigo="00" value="FLETE">10212124545</option>
    <option id="1245245" data-codigo="AJU0001" value="AJUSTE">1245245</option>
    <option id="123213213" data-codigo="BOL01" value="MANGA TRANSP. 20 CM">123213213
    </option>
    <option id="12312312" data-codigo="BOL02" value="MANGA TRANSP. 30 CM">12312312</option>
    <option id="" data-codigo="BOL03" value="MANGA TRANSP. 30CM"></option>
    <option id="" data-codigo="BOL04" value="MANGA TRANSP. 40 CM"></option>
    <option id="4564645645" data-codigo="CHC0001" value="AGENDA DE SALUD CONTROL PRENATAL">4564645645</option>
    <option id="" data-codigo="CHC0002" value="MI LIBRO DE RELACIONES ESP MAPUDUNG"></option>
    <option id="" data-codigo="CHC0003" value="MI LIBRO DE RELACIONES ESPECIALES"></option>
    <option id="" data-codigo="CHC0004" value="MI LIBRO DE NUMEROS "></option>
    <option id="" data-codigo="CHC0007" value="IMAGENES MOVIL "></option>
    <option id="" data-codigo="CHC0008" value="MI LIBRO DE VOCALES "></option>
    <option id="" data-codigo="CHC0009" value="MI LIBRO FIG. GEOMETRICAS "></option>
    <option id="" data-codigo="CHC0010" value="ACOMPAÑANDOTE A DESCUBRIR I"></option>
    <option id="" data-codigo="CHC0011" value="ACOMPAÑANDOTE A DESCUBRIR II"></option>
    <option id="" data-codigo="CHC0012" value="PATERNIDAD ACTIVA"></option>
    <option id="" data-codigo="CHC0013" value="CANCIONES PARA CERECER CONTIGO "></option>
    <option id="" data-codigo="CHC0014" value="JUGUEMOS EN EL CAMPO "></option>
    <option id="" data-codigo="CHC0015" value="CONTEMOS UNA HISTORIA "></option>
    <option id="" data-codigo="CHC0016" value="CUENTOS PARA CANTAR CONTIGO "></option>
    <option id="" data-codigo="CHC0018" value="LIBRO APOYO SICOSOCIAL EN SIT. EMER"></option>
    <option id="" data-codigo="CHC019" value="NADIE ES PERFECTO DESARROLLO FISICO"></option>
    <option id="" data-codigo="CHC020" value="NADIE ES PERFECTO PADRES, MADRES Y "></option>
    <option id="" data-codigo="CHC021" value="NADIE ES PERFECTO SEG. Y PREVENCION"></option>
    <option id="" data-codigo="CHC022" value="NADIE ES PERFECTO DESARROLLO MENTAL"></option>
    <option id="" data-codigo="CHC023" value="NADIE ES PERFECTO COMPORTAMIENTO"></option>
    <option id="" data-codigo="CHC024" value="CUADERNILLO REGISTROVISITA DOM."></option>
    <option id="" data-codigo="CHC025" value="PAUTA DERIVACION A SALA ESTIMULACIO"></option>
    <option id="" data-codigo="CHC026" value="PROGRAMA DE APOYO RN"></option>
    <option id="" data-codigo="CHC027" value="REGISTRO CONTACTO NIÑO (A)"></option>
    <option id="" data-codigo="CHC028" value="VIDEO EJERCICIOS PRENATALES "></option>
    <option id="" data-codigo="CHC029" value="MATERIAL AUDIOV. PARA CRIANZA RESP."></option>
    <option id="" data-codigo="CHC030" value="REGISTRO CONTACTO GESTANTE "></option>
    <option id="" data-codigo="CHC031" value="CUNAS RN"></option>
    <option id="" data-codigo="CHC032" value="PACK PISO GOMA EVA "></option>
    <option id="" data-codigo="CHC033" value="PACK APEGO SEGURO "></option>
    <option id="" data-codigo="CHC034" value="PACK CUIDADOS BASICOS"></option>
    <option id="" data-codigo="CHC035" value="CARTILLA APOYO EN CRIANZA "></option>
    <option id="" data-codigo="CHC036" value="FOLLETO PAPA MAMA LACTANCIA MATERNA"></option>
    <option id="" data-codigo="CHC037" value="FOLLETO INVITACION CONTROL PRENATAL"></option>
    <option id="" data-codigo="CHC038" value="FOLLETO HORA DE SER PADRE "></option>
    <option id="" data-codigo="CHCR005" value="GALLETAS VARIEDAD"></option>
    <option id="" data-codigo="CHCR006" value="CEREAL BARRA "></option>
    <option id="" data-codigo="CHCR017" value="EMPEZANDO A CRECER GUIA GESTACION "></option>
    <option id="" data-codigo="CSO0002" value="COLONIA FEMENINA ANGELICA"></option>
    <option id="" data-codigo="CSO0003" value="JABON LIQUIDO 1 LITRO CS"></option>
    <option id="" data-codigo="CSO0004" value="SHAMPOO 1 LITRO CS"></option>
    <option id="" data-codigo="CSO0005" value="EMULSIONADO  CS"></option>
    <option id="" data-codigo="CSO0006" value="COLONIA MASCULINA CS"></option>
    <option id="" data-codigo="CSOC001" value="DESODORANTE CORPORAL CS"></option>
    <option id="" data-codigo="CV" value="UNIDAD REFRIGERANTE "></option>
    <option id="" data-codigo="CV01" value="VOLANTES ACV"></option>
    <option id="" data-codigo="CV02" value="VOLANTES IAM"></option>
    <option id="" data-codigo="CV03" value="DIPTRICOS ADHERENCIA AL TTO"></option>
    <option id="" data-codigo="CV04" value="CALENDARIOS"></option>
    <option id="" data-codigo="CV05" value="CARPETAS"></option>
    <option id="" data-codigo="CV06" value="FOLLETO 8 FRCV"></option>
    <option id="" data-codigo="CV07" value="BOLSOS TERMICOS"></option>
    <option id="" data-codigo="CV08" value="IMANES CALENDARIO MEDICAMENTOS"></option>
    <option id="" data-codigo="CV09" value="TRIPTICOS PIE DM"></option>
    <option id="" data-codigo="CV10" value="BOLSAS ECOLOGICAS"></option>
    <option id="" data-codigo="CV11" value="INDIVIDUALES AFICHES "></option>
    <option id="" data-codigo="CV12" value="MONOFILAMENTOS PIE DIABETICO"></option>
    <option id="" data-codigo="CV13" value="BOTA PIE DIABETICO L"></option>
    <option id="" data-codigo="CV14" value="BOTA PIE DIABETICO M"></option>
    <option id="" data-codigo="CV15" value="BOTA PIE DIABETICO S"></option>
    <option id="" data-codigo="CV16" value="RECETARIO PRODUCTOS DEL MAR "></option>
    <option id="" data-codigo="CV17" value="RECETARIO SALUDABLE "></option>
    <option id="" data-codigo="CV18" value="RECETARIO SALUDABLE ANILLADO "></option>
    <option id="" data-codigo="CV19" value="FOLLETO CARTILLA DEL PACIENTE"></option>
    <option id="" data-codigo="CV20" value="FOLLETO TOMA MUESTRA BACILOSCOPIA"></option>
    <option id="" data-codigo="CV21" value="BLOCK IAM"></option>
    <option id="" data-codigo="CV22" value="BLOCK ACV"></option>
    <option id="" data-codigo="CV23" value="FOLLETO DIABETES Y CUIDADO"></option>
    <option id="" data-codigo="CV24" value="CARPETA CARDIOV."></option>
    <option id="" data-codigo="CV25" value="CUADERNILLO TIENE ALGUNA DUDA"></option>
    <option id="" data-codigo="CV26" value="CUADERNO CONTROL DIABETICO "></option>
    <option id="" data-codigo="CV27" value="FOLLETO PREV. Y CUIDADO PIES "></option>
    <option id="" data-codigo="CV28" value="HIDROGEL CV 15 GRS"></option>
    <option id="" data-codigo="CV29" value="APOSITO C/PLATA Y FIBRA REFUERZO"></option>
    <option id="" data-codigo="CV30" value="APOSITO DE ESPUMA C/PLATA"></option>
    <option id="" data-codigo="CV31" value="SOLUCION LAVADO DE HERIDAS "></option>
    <option id="" data-codigo="CV32" value="APOSITO C/SOL. RINGER "></option>
    <option id="" data-codigo="CV33" value="VENDA FIJACION 8CMX4M"></option>
    <option id="" data-codigo="CV34" value="APOSITO ADHESION BACT. 10X10"></option>
</datalist>

2
  • para lo que necesitas existen plugins que lo hacen de una manera fabulosa Si usas select, recomiendo usar Select2 Si usas datalist, recomiendo usar FlexDataList Saludos! el 27 jun. 2017 a las 15:00
  • Estimado gracias por su ayuda y consejos soy nuevo en esto :) Saludos
    – Kill code
    el 27 jun. 2017 a las 16:00

2 respuestas 2

1

Lamentablemente no se le puede cambiar los estilos a los elementos datalist y tampoco disponen de un atributo para poder controlar el tamaño máximo.

Las soluciones son hacer una pequeña función de JS para arreglar tu problema, o elegir una libreria que directamente nos ofrece esta funcionalidad:

Alternativas:

Función JS usando datalist

var search = document.querySelector('#myprod');
var results = document.querySelector('#listprod');
var templateContent = document.querySelector('#listtemplate').content;
search.addEventListener('keyup', function handler(event) {
    while (results.children.length) results.removeChild(results.firstChild);
    var inputVal = new RegExp(search.value.trim(), 'i');
    var set = Array.prototype.reduce.call(templateContent.cloneNode(true).children, function searchFilter(frag, item, i) {
        if (inputVal.test(item.value) && frag.children.length < 6) frag.appendChild(item);
        return frag;
    }, document.createDocumentFragment());
    results.appendChild(set);
});
<template id="listtemplate"> 
    <option id="10212124545" data-codigo="00" value="FLETE">10212124545</option>
    <option id="1245245" data-codigo="AJU0001" value="AJUSTE">1245245</option>
    <option id="123213213" data-codigo="BOL01" value="MANGA TRANSP. 20 CM">123213213</option>
    <option id="12312312" data-codigo="BOL02" value="MANGA TRANSP. 30 CM">12312312</option>
    <option id="" data-codigo="BOL03" value="MANGA TRANSP. 30CM"></option>
    <option id="" data-codigo="BOL04" value="MANGA TRANSP. 40 CM"></option>
    <option id="4564645645" data-codigo="CHC0001" value="AGENDA DE SALUD CONTROL PRENATAL">4564645645</option>
    <option id="" data-codigo="CHC0002" value="MI LIBRO DE RELACIONES ESP MAPUDUNG"></option>
    <option id="" data-codigo="CHC0003" value="MI LIBRO DE RELACIONES ESPECIALES"></option>
    <option id="" data-codigo="CHC0004" value="MI LIBRO DE NUMEROS "></option>
    <option id="" data-codigo="CHC0007" value="IMAGENES MOVIL "></option>
    <option id="" data-codigo="CHC0008" value="MI LIBRO DE VOCALES "></option>
    <option id="" data-codigo="CHC0009" value="MI LIBRO FIG. GEOMETRICAS "></option>
    <option id="" data-codigo="CHC0010" value="ACOMPAÑANDOTE A DESCUBRIR I"></option>
    <option id="" data-codigo="CHC0011" value="ACOMPAÑANDOTE A DESCUBRIR II"></option>
    <option id="" data-codigo="CHC0012" value="PATERNIDAD ACTIVA"></option>
    <option id="" data-codigo="CHC0013" value="CANCIONES PARA CERECER CONTIGO "></option>
    <option id="" data-codigo="CHC0014" value="JUGUEMOS EN EL CAMPO "></option>
    <option id="" data-codigo="CHC0015" value="CONTEMOS UNA HISTORIA "></option>
    <option id="" data-codigo="CHC0016" value="CUENTOS PARA CANTAR CONTIGO "></option>
    <option id="" data-codigo="CHC0018" value="LIBRO APOYO SICOSOCIAL EN SIT. EMER"></option>
    <option id="" data-codigo="CHC019" value="NADIE ES PERFECTO DESARROLLO FISICO"></option>
    <option id="" data-codigo="CHC020" value="NADIE ES PERFECTO PADRES, MADRES Y "></option>
    <option id="" data-codigo="CHC021" value="NADIE ES PERFECTO SEG. Y PREVENCION"></option>
    <option id="" data-codigo="CHC022" value="NADIE ES PERFECTO DESARROLLO MENTAL"></option>
    <option id="" data-codigo="CHC023" value="NADIE ES PERFECTO COMPORTAMIENTO"></option>
    <option id="" data-codigo="CHC024" value="CUADERNILLO REGISTROVISITA DOM."></option>
    <option id="" data-codigo="CHC025" value="PAUTA DERIVACION A SALA ESTIMULACIO"></option>
    <option id="" data-codigo="CHC026" value="PROGRAMA DE APOYO RN"></option>
    <option id="" data-codigo="CHC027" value="REGISTRO CONTACTO NIÑO (A)"></option>
    <option id="" data-codigo="CHC028" value="VIDEO EJERCICIOS PRENATALES "></option>
    <option id="" data-codigo="CHC029" value="MATERIAL AUDIOV. PARA CRIANZA RESP."></option>
    <option id="" data-codigo="CHC030" value="REGISTRO CONTACTO GESTANTE "></option>
    <option id="" data-codigo="CHC031" value="CUNAS RN"></option>
    <option id="" data-codigo="CHC032" value="PACK PISO GOMA EVA "></option>
    <option id="" data-codigo="CHC033" value="PACK APEGO SEGURO "></option>
    <option id="" data-codigo="CHC034" value="PACK CUIDADOS BASICOS"></option>
    <option id="" data-codigo="CHC035" value="CARTILLA APOYO EN CRIANZA "></option>
    <option id="" data-codigo="CHC036" value="FOLLETO PAPA MAMA LACTANCIA MATERNA"></option>
    <option id="" data-codigo="CHC037" value="FOLLETO INVITACION CONTROL PRENATAL"></option>
    <option id="" data-codigo="CHC038" value="FOLLETO HORA DE SER PADRE "></option>
    <option id="" data-codigo="CHCR005" value="GALLETAS VARIEDAD"></option>
    <option id="" data-codigo="CHCR006" value="CEREAL BARRA "></option>
    <option id="" data-codigo="CHCR017" value="EMPEZANDO A CRECER GUIA GESTACION "></option>
    <option id="" data-codigo="CSO0002" value="COLONIA FEMENINA ANGELICA"></option>
    <option id="" data-codigo="CSO0003" value="JABON LIQUIDO 1 LITRO CS"></option>
    <option id="" data-codigo="CSO0004" value="SHAMPOO 1 LITRO CS"></option>
    <option id="" data-codigo="CSO0005" value="EMULSIONADO  CS"></option>
    <option id="" data-codigo="CSO0006" value="COLONIA MASCULINA CS"></option>
    <option id="" data-codigo="CSOC001" value="DESODORANTE CORPORAL CS"></option>
    <option id="" data-codigo="CV" value="UNIDAD REFRIGERANTE "></option>
    <option id="" data-codigo="CV01" value="VOLANTES ACV"></option>
    <option id="" data-codigo="CV02" value="VOLANTES IAM"></option>
    <option id="" data-codigo="CV03" value="DIPTRICOS ADHERENCIA AL TTO"></option>
    <option id="" data-codigo="CV04" value="CALENDARIOS"></option>
    <option id="" data-codigo="CV05" value="CARPETAS"></option>
    <option id="" data-codigo="CV06" value="FOLLETO 8 FRCV"></option>
    <option id="" data-codigo="CV07" value="BOLSOS TERMICOS"></option>
    <option id="" data-codigo="CV08" value="IMANES CALENDARIO MEDICAMENTOS"></option>
    <option id="" data-codigo="CV09" value="TRIPTICOS PIE DM"></option>
    <option id="" data-codigo="CV10" value="BOLSAS ECOLOGICAS"></option>
    <option id="" data-codigo="CV11" value="INDIVIDUALES AFICHES "></option>
    <option id="" data-codigo="CV12" value="MONOFILAMENTOS PIE DIABETICO"></option>
    <option id="" data-codigo="CV13" value="BOTA PIE DIABETICO L"></option>
    <option id="" data-codigo="CV14" value="BOTA PIE DIABETICO M"></option>
    <option id="" data-codigo="CV15" value="BOTA PIE DIABETICO S"></option>
    <option id="" data-codigo="CV16" value="RECETARIO PRODUCTOS DEL MAR "></option>
    <option id="" data-codigo="CV17" value="RECETARIO SALUDABLE "></option>
    <option id="" data-codigo="CV18" value="RECETARIO SALUDABLE ANILLADO "></option>
    <option id="" data-codigo="CV19" value="FOLLETO CARTILLA DEL PACIENTE"></option>
    <option id="" data-codigo="CV20" value="FOLLETO TOMA MUESTRA BACILOSCOPIA"></option>
    <option id="" data-codigo="CV21" value="BLOCK IAM"></option>
    <option id="" data-codigo="CV22" value="BLOCK ACV"></option>
    <option id="" data-codigo="CV23" value="FOLLETO DIABETES Y CUIDADO"></option>
    <option id="" data-codigo="CV24" value="CARPETA CARDIOV."></option>
    <option id="" data-codigo="CV25" value="CUADERNILLO TIENE ALGUNA DUDA"></option>
    <option id="" data-codigo="CV26" value="CUADERNO CONTROL DIABETICO "></option>
    <option id="" data-codigo="CV27" value="FOLLETO PREV. Y CUIDADO PIES "></option>
    <option id="" data-codigo="CV28" value="HIDROGEL CV 15 GRS"></option>
    <option id="" data-codigo="CV29" value="APOSITO C/PLATA Y FIBRA REFUERZO"></option>
    <option id="" data-codigo="CV30" value="APOSITO DE ESPUMA C/PLATA"></option>
    <option id="" data-codigo="CV31" value="SOLUCION LAVADO DE HERIDAS "></option>
    <option id="" data-codigo="CV32" value="APOSITO C/SOL. RINGER "></option>
    <option id="" data-codigo="CV33" value="VENDA FIJACION 8CMX4M"></option>
    <option id="" data-codigo="CV34" value="APOSITO ADHESION BACT. 10X10"></option>
</template>
<input type="text" id="myprod" onblur="" list="listprod" class="form-control " placeholder="Buscar Producto">
<datalist id="listprod">
</datalist>


Respuesta original en SO de Olli K

1
  • Con esta respuesta tardía se busca dar respuesta a una pregunta "valida", para poder ayudar a las estadísticas del sitio por el problema que comenta @Fedorqui en meta Respuesta de Fedorqui
    – x3k
    el 19 sep. 2019 a las 8:50
0

Una pregunta sobre el ejemplo con Función JS usando datalist. Como sería si tengo dos pero ambos pueden seleccionar del mismo datalist?

El ejemplo seria seleccionar origen y seleccionar destino. GRACIAS !!

1
  • 1
    Si tienes una nueva pregunta, la puedes formular haciendo clic en el botón Formular una pregunta. Incluye un enlace a esta pregunta si ayuda a proporcionar contexto. - Desde revisión
    – Mateo
    el 31 ene. a las 0:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.