Flexdatalist - Complemento de autocompletado con soporte de
los HTML5 elemento Es bastante útil en el desarrollo de frontend moderno. Sin embargo, es uno de esos elementos que no conocen muchos desarrolladores.
Funciona en un campo de entrada donde puedes autosugerir ciertos valores para la entrada. La configuración predeterminada se ve bien y hemos cubierto algunos consejos de codificación para crear efectos geniales con datalists autosugestivos.
Sin embargo, es mucho más fácil trabajar con un plugin como Flexdatalista. Eso soporta una gama más amplia de navegadores y te permite Personaliza completamente el diseño de tu datalist..
No todo el mundo necesita funciones de autocompletado y con los datalists nativos de HTML5, es posible que no se moleste con un complemento. Sin embargo, Flexdatalist es quizás el mejor por ahí porque se basa en los comportamientos nativos de los datos añadir:
- Soporte de respuesta móvil
- Descripciones adicionales para cada artículo
- Opciones para selecciones múltiples a la vez
- Controladores de eventos personalizados
Sus todo impulsado por jQuery, así que lo harás Necesito una copia de la última versión. para que esto funcione También viene con su propia hoja de estilo CSS que tal vez desee combinar en un solo archivo CSS para reducir las solicitudes HTTP.
Puedes encontrar instrucciones completas de configuración en la página principal de demostración que incluye descargar enlaces a los archivos Flexdatalist.
Es muy sencillo de configurar, con solo una linea de JavaScript. Por defecto, el plugin apunta todas las entradas con la clase .flexdatalista, así que solo agregar eso a tu código debería ser suficiente para ver los resultados.
Usted acaba de agregar el Elemento dentro de su campo de entrada y Flexdatalist se encarga del resto. Va a auto-estilo la lista, incluyendo texto descriptivo opcional.
La forma más sencilla de agregar texto extra es a través de un archivo JSON lo que puedas adjuntar a su entrada a través de un atributo de datos.
Por ejemplo, si visita la página de demostración de Flexdatalist, encontrará un “Países” campo de entrada con el atributo datos-datos = 'países.json'. Esto hace referencia a un archivo remoto que almacena todos los datos de entrada en bruto externamente.
Demasiados de estos campos puedes ralentizar un poco la página. Sin embargo, no puedo imaginar que muchos sitios ejecuten más de algunos de estos formularios de registro de datos en una sola página, sin mencionar que incluso con este complemento de jQuery, están todavía bastante rápido.
Para empezar, solo Visita el repositorio de GitHub y descarga una copia.. Esto incluye un enlace a la página principal de demostración que también tiene documentación completa para la configuración, opciones de JavaScript y un montón de fragmentos de código de ejemplo para repartir.
