Seleccione la primera letra css. Pseudoclase Primera letra o cómo resaltar la primera letra en css. !Mañana hay descuento en todos los productos cosméticos.
Última actualización: 1.11.2015
El widget de autocompletar está diseñado para crear campos de entrada especiales con funcionalidad de autocompletar:
Especificamos alguna matriz como fuente de autocompletar y luego usamos el widget.
Conexión de un widget a una fuente externaEn el ejemplo anterior, la fuente de la lista de autocompletar se configuró localmente. Sin embargo, también podemos conectarnos dinámicamente a algún script en el servidor, lo que devolvería una lista de opciones para autocompletar. En nuestro caso será secuencia de comandos php. Deja que se vea así:
La variable de salida $output contiene la lista completa en formato json. En realidad, por supuesto, lo más probable es que todos los elementos de la lista se recuperen de la base de datos, pero por simplicidad he simplificado el ejemplo.
Básicamente, cada elemento de la lista es un objeto que tiene dos propiedades definidas: etiqueta (la etiqueta que se mostrará) y valor (el valor en sí). EN en este caso ambas propiedades tienen el mismo significado.
Del lado del cliente, la recepción podría verse así:
$("input#lang").autocomplete(( fuente: function(solicitud,respuesta) ( $.getJSON("json.php", ( filtro: $("input#lang").val() ), function( data)( var sugerencias = ; // matriz para almacenar resultados $.each(data, function(key, val) ( sugerencias.push(val.value); // agrega todos los elementos )); respuesta(suggestions); )) ; ) ));
Por lo tanto, recibimos dinámicamente los caracteres ingresados en el campo de entrada y los transmitimos en una solicitud al servidor. En el servidor, estos caracteres se utilizan como filtro y, como respuesta, se devuelve al cliente un conjunto de registros filtrados.
Aplicar estilo al widgetAl aplicar un widget a al elemento de entrada A este elemento Se agrega la clase ui-autocomplete-input. Y el área de la lista de autocompletar es una lista ul:
Cambiando los estilos de las clases correspondientes, podemos personalizar la visualización de la lista:
li.ui-menu-item ( tamaño de fuente: 12px; familia de fuentes: Verdana; ) $(función())( var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal " ] ; $("input#lang").autocomplete(( fuente: idiomas ));
Propiedades de los widgetsEl widget tiene las siguientes propiedades:
appendTo: especifica qué elemento incluirá la lista de autocompletar:
$(function())( var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ; $("input#lang").autocomplete(( appendTo: "#langsList" , fuente: idiomas ));
autoFocus: cuando esta propiedad se establece en verdadero, se resalta el primer elemento de la lista de autocompletar. Por defecto la propiedad tiene valor falso.
retraso: especifica, en milisegundos, el tiempo de retraso antes de que se muestre la lista de autocompletar ($("#langs").autocomplete(( retraso: 500 ));). Por defecto esta propiedad es igual a 300
deshabilitado: cuando se establece en verdadero, deshabilita el widget. El valor predeterminado es falso.
minLength: especifica el número mínimo de caracteres que el usuario debe ingresar antes de que se muestre la lista de autocompletar: $("#langs").autocomplete(( minLength: 0 )); . Por defecto, esta propiedad tiene un valor de 1.
posición: usando esta propiedad, puede establecer la posición de la lista en la página. El objeto de posición utiliza una serie de opciones, cuya lista se puede encontrar en https://api.jqueryui.com/position/. De forma predeterminada, la propiedad tiene el valor ( my: "left top", at: "left bottom", colisión: "none"). La opción my especifica la posición del elemento de la lista de autocompletar con respecto al cual está alineado con el elemento de entrada. Es decir, la parte superior izquierda se alinea con respecto a la izquierda. esquina superior. La opción at especifica la posición del elemento de entrada con respecto al cual se alineará la lista de autocompletar. La opción de colisión personaliza aún más la visualización de la lista.
podemos cambiar parámetros iniciales por ejemplo, $("input#lang").autocomplete(( posición: ( mi: "arriba derecha", en: "abajo derecha", colisión: "ajustar"), fuente: langs ));
fuente: especifica la fuente para autocompletar. Puede ser una matriz, que se puede configurar como una matriz externa o directamente con la propiedad: $("input#lang").autocomplete(( fuente: ["Java", "JavaScript", "VisualBasic", "PHP" , "Pascal "]));
El widget de autocompletar tiene los siguientes métodos:
autocompletar("cerrar"): cierra la lista ($("#lang").autocompletar("cerrar");)
autocompletar("disable"): desactiva el widget
autocompletar("enable"): habilita el widget de autocompletar
autocompletar ("destruir"): elimina la funcionalidad de autocompletar de un elemento
autocompletar ("widget"): devuelve objeto jQuery, que representa el widget (var widget = $("#lang").autocomplete("widget");)
autocompletar("opción"): le permite obtener o establecer los valores de propiedad del widget. Por ejemplo, establezcamos y obtengamos el valor de la propiedad plegable:
Var idiomas = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"];
$("input#lang").autocomplete(( fuente: idiomas));
autocompletar ("búsqueda", "valor"): busca en la lista según el valor. Por ejemplo, el método $("#lang").autocomplete("search", "i"); será equivalente a la acción de escribir el carácter "i" en un campo de texto. Y luego mostrará todos los elementos de la lista que tienen el carácter "i" en ellos.
Eventos de widgets
Al manejar los siguientes eventos de widgets, podemos realizar ciertas acciones en respuesta a las acciones del usuario:
cambio (evento, ui): el evento ocurre después de que cambia el elemento seleccionado.
El parámetro de evento contiene el objeto de evento y el parámetro ui representa un objeto que contiene información sobre el elemento seleccionado:
Var idiomas = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"];
$("input#lang").autocomplete(( fuente: idiomas));
$("input#lang").autocomplete(( cambio: función(evento, ui) ( console.log(ui.item.value); ) ));
Usando la propiedad ui.item obtenemos el elemento seleccionado. El elemento se define como un objeto (etiqueta, valor), por lo que para obtener el valor del elemento seleccionado, use la propiedad value
close(event, ui): ocurre cuando se cierra la lista de autocompletar
crear (evento, ui): ocurre cuando se crea un widget
