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.
Autocompletar.Búsqueda parcial local
Sintaxis:
{ partialSearch: boolean }
Valores:
- booleano: este es un valor booleano que especifica si el texto coincidirá solo al comienzo de las strings. El valor predeterminado es falso.
Ejemplo 1: en este ejemplo, hemos establecido la opción de búsqueda parcial en falso, por lo que buscará solo desde el comienzo de la string.
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 gfg', 'Abc gfg', 'Abcd gfg', 'Abcde gfg', 'Abcdef gfg', 'Abcdefg gfg', 'Abcdefgh gfg' ]; // Initialize the Autocompleter new Autocompleter.Local('GeeksforGeeks', 'names', names, { // Specify whether only the // beginning of the strings // would be searched partialSearch: false }); </script> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, hemos establecido la opción de búsqueda parcial en verdadero, por lo que buscará desde cualquier lugar de la string.
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 gfg', 'Abc gfg', 'Abcd gfg', 'Abcde gfg', 'Abcdef gfg', 'Abcdefg gfg', 'Abcdefgh gfg' ]; // Initialize the Autocompleter new Autocompleter.Local('GeeksforGeeks', 'names', names, { // Specify whether only the beginning // of the strings would be searched partialSearch: true }); </script> </body> </html>
Producción: