jQuery - Completar automáticamente el widget

Descripción

los Widget AutoComplete La función se puede usar con widgets en JqueryUI. Los widgets de Autocompletar proporcionan sugerencias mientras escribe en el campo. Por ejemplo, supongamos que da Ja como entrada, proporcionará una salida como Java o JavaScript.

Sintaxis

Aquí está la sintaxis simple para usar Autocompletar:

$( "#tags" ).autocomplete({
   source: availableTags
});

Ejemplo

A continuación se muestra un ejemplo simple que muestra el uso de Autocompletar:

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Autocomplete - Default functionality</title>
		
      <link rel = "stylesheet" 
         href = "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
			
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>
  
      <script>
         $(function() {
            var availableTags = [
               "ActionScript",
               "AppleScript",
               "Asp",
               "BASIC",
               "C",
               "C++",
               "Clojure",
               "COBOL",
               "ColdFusion",
               "Erlang",
               "Fortran",
               "Groovy",
               "Haskell",
               "Java",
               "JavaScript",
               "Lisp",
               "Perl",
               "PHP",
               "Python",
               "Ruby",
               "Scala",
               "Scheme"
            ];
				
            $( "#tags" ).autocomplete({
               source: availableTags
            });
				
         });
      </script>
   </head>

   <body>
      <div class = "ui-widget">
         <label for = "tags">Tags: </label>
         <input id = "tags">
      </div>
 
   </body>
</html>

Esto producirá el siguiente resultado:

jquery-widgets.htm

↰ Previous page