jQuery - Widget AutoComplete

Descrição

o Widget AutoComplete A função pode ser usada com widgets em JqueryUI. Os widgets Autocomplete fornecem sugestões enquanto você digita no campo. Suponha que dê Ja como uma entrada, ele fornecerá uma saída como Java ou JavaScript.

Sintaxe

Aqui está a sintaxe simples para usar o Autocomplete -

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

Exemplo

A seguir está um exemplo simples que mostra o uso do Autocomplete -

<!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>

Isso produzirá o seguinte resultado -

jquery-widgets.htm

↰ Previous page