MagicSuggest para jQuery: hermosos cuadros combinados de selección basados ​​en Bootstrap 3

“.

<input type="text" id="ms-inputfield" />

En el ejemplo anterior, elegimos ir por el elemento „“. Esto nos permite agregar un elemento «» apropiado. Tenga en cuenta que, aparte de lo que está acostumbrado, hacer clic en „“ no le permite enfocar el elemento „“.

En el siguiente paso, usamos JavaScript para crear un campo de entrada mágico. Llamamos al complemento en el elemento „“ a través de la ID dada.

$("#ms-input").magicSuggest({
  placeholder: "PLease choose",
  data: [{
    name: "Apple"
  }, {
    name: "Banana"
  }]
});

Es posible llamar a „magicSuggest()“ sin tener que agregar ningún parámetro. Si lo hace, no se completará previamente ningún elemento en la lista. Cada entrada manual se agregará automáticamente a la selección. El uso de „x“ elimina la entrada nuevamente. Si no desea utilizar el texto de entrada estándar, utilice el parámetro «marcador de posición» para sobrescribirlo. El parámetro «datos» está destinado a llevar cualquier valor que desee que esté disponible desde el principio. Todos estos elementos se mostrarán como una lista debajo del área de entrada y completarán la selección a través de autocompletar. Los elementos de relleno previo se almacenan como un objeto JSON. En lugar de usar un objeto JSON internamente, también puede llamar a un archivo JSON externo.

$("#ms-input").magicSuggest({
  placeholder: "Please choose",
  data: "values.json"
});

Si desea predefinir muchos valores o si está utilizando, por ejemplo, PHP para cargar valores desde una base de datos, esta función de importación de archivos JSON externos es una gran ventaja.

MagicSuggest: Multitud de opciones

MagicSuggest ofrece muchas opciones para ajustar la funcionalidad de las áreas de entrada a las necesidades de su proyecto. Si no desea que los usuarios puedan ingresar elementos libremente, puede definir el cuadro de selección para que solo acepte valores predefinidos. Si desea limitar la cantidad de elementos seleccionables, hágalo.

$("#ms-input").magicSuggest({
  allowFreeEntries: true,
  maxSelection: 3
});

En nuestro ejemplo, permitimos entradas gratuitas y valores predefinidos y limitamos la cantidad de elementos seleccionables a 3. Una lista completa con todos los parámetros y una documentación completa sobre cómo usarlos está disponible en el sitio web de MagicSuggest.

Los diseños individuales son posibles

Si no desea que su lista de selección se muestre como texto sin formato, cámbiela. Con MagicSuggest también puede integrar texto formateado e incluso imágenes en las listas. Toda la información necesaria, por ejemplo, los nombres de los archivos y las direcciones URL, se pueden entregar a través del parámetro «datos» desde el interior del objeto JSON.

$("#ms-input").magicSuggest({
  placeholder: "Please choose",
  data: [{
    name: "New York",
    file: "en.png"
  }, {
    name: "Paris",
    file: "fr.png"
  }],
  renderer: function(data) {
    return "<img src=\"" + data.file + "\" /> " + data.name;
  }
});

Como puede ver, el objeto JSON no solo lleva la clave «nombre» sino también la clave «archivo». El parámetro „renderer“ define el aspecto de los elementos seleccionados individuales dentro de la lista. En nuestro ejemplo, adjuntamos una función que recupera un fragmento de código HTML.

Ejemplo de personalización del diseño

Para agregar a „renderer“, el parámetro „selectionRenderer“ define el aspecto de los elementos elegidos.

Conclusión

MagicSuggest es una herramienta versátil y personalizable individualmente para áreas seleccionadas con selecciones múltiples. Nicolas Bize crea y mantiene el complemento jQuery. Actualmente la versión 2 es la más reciente. Dado que MagicSuggest está disponible bajo una licencia MIT, puede usarlo con fines comerciales y privados por igual.

(dpe)