El módulo de autocompletado permite campos de entrada de texto de autocompletado local y alimentado por servidor. En este artículo, mostraremos el efecto de Autocompletar mediante el uso de la biblioteca de JavaScript llamada script.aculo.us , que ayuda a completar automáticamente los campos de texto de acuerdo con las sugerencias dadas en forma de array. También podemos agregar una lista de sugerencias.
Creando un Autocompletador Ajax:
Sintaxis:
new Ajax.Autocompleter(element, container, url {options } )
Opciones de autocompletado:
Opciones |
Descripción |
| paramname | Se puede usar para dar el nombre del parámetro que contiene el contenido del campo de texto publicado en el lado del servidor. |
| minchars | Se puede usar para especificar el número de caracteres después de los cuales son visibles las sugerencias del lado del servidor. |
| frecuencia | Se puede utilizar para especificar el intervalo de tiempo entre las comprobaciones internas para verificar si se debe publicar la solicitud al lado del servidor. |
| indicador | Se puede usar para mostrar la identificación o la referencia a un elemento mientras se procesa la solicitud del servidor. |
| parámetros | Se puede usar para pasar parámetros adicionales al recurso del lado del servidor. |
| actualizarElemento | Es una función de devolución de llamada que se activa cuando el usuario selecciona una de las sugerencias. Luego actualiza el valor del campo de texto con la sugerencia elegida. |
| afterUpdateElement | Es una función de devolución de llamada que se activa después de que se haya ejecutado la función updateElement. |
| fichas | Se puede usar para indicar tokens que se pueden usar para permitir que se ingresen múltiples elementos en el campo de texto, y cada elemento se puede autocompletar individualmente. Los tokens pueden consistir en una sola string o una array de strings. |
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript"
src="./javascript/prototype.js">
</script>
<script type="text/javascript" src=
"./javascript/scriptaculous.js?load = effects,controls">
</script>
<script type="text/javascript">
window.onload = function () {
new Ajax.Autocompleter("searchBox",
"Result", "Suggestions.php");
};
</script>
</head>
<body>
<div>
<label>Search :</label>
<input type="text" id="searchBox" />
<div id="Result"></div>
</div>
</body>
</html>
Las sugerencias en Ajax-autompleter se almacenan en un servidor, puede usar PHP, ruby, python, node o cualquier otro lenguaje para diseñar su servidor. Aquí hemos usado PHP para lo mismo.
En las sugerencias, el archivo PHP hemos utilizado una lista desordenada de HTML simple para sugerencias
<ul> <li>effect</li> <li>autocomplete</li> <li>ajax</li> <li>php</li> <li>paramname</li> <li>suggestions</li> </ul>
Producción
Crear un autocompletador local:
Sintaxis:
new Autocompleter.Local(field, container, dataSource {options});
Opciones de autocompletado:
Opciones |
Descripción |
| opciones | Se puede utilizar para especificar el número de opciones que se mostrarán. |
| búsqueda parcial | Se puede usar para hacer coincidir las palabras al comienzo de la string completa en la base de datos. |
| búsqueda completa | Se puede usar para habilitar la coincidencia en cualquier lugar dentro de las strings de finalización. |
| caracteres parciales | Se puede utilizar para definir el número de caracteres que se deben escribir antes de activar la coincidencia parcial. |
| ignorar caso | Se puede usar para ignorar mayúsculas y minúsculas durante la coincidencia. |
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="./javascript/prototype.js">
</script>
<script type="text/javascript" src=
"./javascript/scriptaculous.js?load = effects,controls">
</script>
<script type="text/javascript">
window.onload = function () {
new Autocompleter.Local(
'searchBox',
'Result',
['effect', 'drag', 'drop', 'auto',
'complete', 'slider', 'sound'],
);
}
</script>
</head>
<body>
<div>
<label>Search :</label>
<input type="text" id="searchBox" />
<div id="Result"></div>
</div>
</body>
</html>
Producción
Publicación traducida automáticamente
Artículo escrito por swapnil074 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA