La biblioteca script.aculo.us es una biblioteca multinavegador que tiene como objetivo mejorar la interfaz de usuario de un sitio web. El Autocompletador se puede utilizar para proporcionar soporte de autocompletado para campos de texto en la página web.
Autocompletador . Opciones locales ofrecidas al usuario.
Sintaxis:
{ choices: number }
Valores:
- número: Esta opción toma un número que indica un número de opciones para ofrecer. El valor predeterminado es 10.
Ejemplo 1: En este ejemplo, hemos establecido el número de opciones en 5, por lo que se ofrecen 5 opciones.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Include the required scripts -->
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects,controls">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<label for="GeeksforGeeks">
Input any name:
</label>
<br />
<input id="GeeksforGeeks" autocomplete="off"
size="40" type="text" value="" />
<div class="autocomplete" id="names"
style="display:none">
</div>
<script type="text/javascript">
// Array to be used as choices
var names = [
'Ab',
'Abc',
'Abcd',
'Abcde',
'Abcdef',
'Abcdefg'
];
// Initialize the Autocompleter
new Autocompleter.Local('GeeksforGeeks',
'names', names, {
// Specify the number of choices
// to be displayed
choices: 5
});
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, hemos establecido el número de opciones en 7, por lo que se ofrecen 7 opciones.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Include the required scripts -->
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects,controls">
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<label for="GeeksforGeeks">
Input any name:
</label>
<br />
<input id="GeeksforGeeks" autocomplete="off"
size="40" type="text" value="" />
<div class="autocomplete" id="names"
style="display:none">
</div>
<script type="text/javascript">
// Array to be used as choices
var names = [
'Ab',
'Abc',
'Abcd',
'Abcde',
'Abcdef',
'Abcdefg'
];
// Initialize the Autocompleter
new Autocompleter.Local('GeeksforGeeks',
'names', names, {
// Specify the number of choices
// to be displayed
choices: 7
});
</script>
</body>
</html>
Producción:
