En el mundo web, es una práctica muy común utilizar la entrada de escritura anticipada de autocompletar. Por ejemplo, campo de dirección de usuario. Para ello, jQuery dispone de una función de interfaz de usuario muy común.
En el proceso de búsqueda de un valor específico, la función de selección de autocompletado de jQuery UI proporciona al usuario algunas sugerencias de strings para el área de entrada, lo que efectivamente ahorra tiempo.
La acción de selección de autocompletar se activa cuando el usuario selecciona una de las opciones de la lista rellenada previamente.
El ejemplo universal muy común es el cuadro de sugerencias de Google utilizado por millones de usuarios de todo el mundo. El propósito básico de esta función es reemplazar el valor del campo de texto con el valor seleccionado de la lista por el usuario. Desenstring múltiples eventos como el foco, el evento de apertura de tecla o el cambio de entrada del usuario que se utilizan para llamar a diferentes funciones que devuelven objetos que describen el elemento enfocado o seleccionado.
La implementación se realiza de varias maneras, como obtener datos de la tabla de la base de datos para completar los valores para el campo de entrada del usuario. Selecciona las strings de la base de datos relacionada que comienza con palabras clave ingresadas por el usuario. A diferencia de la implementación dinámica, puede realizar la implementación estática. Por ejemplo, el uso de un archivo XML o una lista se toma de una array de variables.
select (evento, ui) Esta función se activa cada vez que se selecciona cualquier opción de la lista emergente. Contiene dos parámetros que se enumeran a continuación:
- evento: este parámetro menciona el evento desenstringdo por el usuario.
- ui: este parámetro menciona el objeto que contiene el nombre y las propiedades de valor de los elementos seleccionados.
Fragmento de código:
$( ".selector" ).autocomplete({
select: function( event, ui ) {}
});
Ejemplo 1:
<!doctype html>
<html>
<head>
<title>
jQuery Autocomplete Selection Event
</title>
<link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
</head>
<body>
<label>Select Technology : </label>
<input id="autocompleteInput">
<script>
var tags = [
"jQuery", "java", "php",
"MySQL", "javascript",
"html", "C#", "C", "MongoDB"
];
$("#autocompleteInput").autocomplete({
source: tags
});
</script>
</body>
</html>
Producción:
Nota: En el ejemplo anterior, el código fuente en realidad define los datos que se utilizarán para la selección.
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
jQuery AutoComplete selection
</title>
<link rel="stylesheet" href=
"http://code.jquery.com/ui/1.11.3/themes/ui-lightness/jquery-ui.css"/>
<script src=
"http://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"http://code.jquery.com/ui/1.11.2/jquery-ui.js">
</script>
<script>
$(document).ready(function() {
var tags = [
"Washington", "Cincinnati",
"Dubai", "Dublin", "Colombo",
"Culcutta"
];
$('#input').autocomplete({
source : tags,
select : showResult,
focus : showResult,
change :showResult
})
function showResult(event, ui) {
$('#cityName').text(ui.item.label)
}
});
</script>
</head>
<body>
<form>
<div class="ui-widget">
<label for="input">City Name : </label>
<input id="input"/><br>
Label of City Name: <div id="cityName"></div>
</div>
</form>
</body>
</html>
Producción:
Nota: De los dos ejemplos de código anteriores, puede observar que el parámetro fuente ocupa una lista de opciones de string, como una array o el resultado de una devolución de llamada de función.
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA