Estoy desarrollando una página web que requiere muchos cuadros de texto de autocompletar. Como soy nuevo en JavaScript, es muy difícil para mí crear mi propio cuadro de texto de autocompletar. Así que he buscado muchos ejemplos en Internet, pero solo funcionan para un solo cuadro de texto. Esto significa que no puedo usar el mismo archivo js para crear otro cuadro de texto de autocompletar. Tampoco encontré ningún ejemplo de este tipo en stackoverflow. ¿Alguien puede ayudarme en esto?

24
Arvind Thakur 26 ago. 2011 a las 14:17

8 respuestas

La mejor respuesta

Use JQuery con el complemento AutoSuggest.

http://docs.jquery.com/Plugins/autocomplete

Incluya las bibliotecas JS (consulte la documentación anterior), luego haga esto en HTML:

<input type="text" class="autocomplete" name="n1" />
<input type="text" class="autocomplete" name="n2" />
<input type="text" class="autocomplete" name="n3" />
<input type="text" class="autocomplete" name="n4" />

Luego agregue un Autocompletar a la clase CSS en su Javascript:

var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
$(".autocomplete").autocomplete(data);
16
ty812 26 ago. 2011 a las 10:23
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.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>
0
nazmulhaqued 18 ene. 2020 a las 08:33

Si eres nuevo en el desarrollo web, te recomiendo que uses jquery y paquete jqueryUI. El enlace de arriba es a la página de demostración donde puedes jugar con diferentes tipos de fuentes de datos. Copié un ejemplo que usa una matriz simple como fuente de datos

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

<div><input class="tags" type="text" /></div>
<div><input class="tags" type="text" /></div>
2
Cheburek 26 ago. 2011 a las 10:35

Recomiendo comprobar esto:

http://complete-ly.appspot.com/

El caso simple debe cumplir con sus requisitos:

var cly = completely(document.getElementById('a-div-wrapping-your-autocomplete-box');
cly.options = [ 'your','array','of','options','(possibly sorted somehow)'];
11
wonderboy 16 sep. 2013 a las 12:45

El complemento AutoSuggest ha quedado en desuso y ahora está incluido en jQuery UI.

Mira esto:
http://jqueryui.com/demos/autocomplete/

7
Alexander Abakumov 8 oct. 2018 a las 16:24

Aquí hay un método fácil, solo use el evento onkeyup:

<input type="text" id="a" onkeyup="myFunction()">
<br/>
<br/>


<script type="text/javascript">
function myFunction() {

    var x = document.getElementById("a").value;  

    document.getElementById("abc").innerHTML = x;   
}
</script> 
1
Nahid Bandi 10 sep. 2017 a las 09:31

Puede usar dataList, es una forma fácil de completar automáticamente el cuadro de texto

0
saketh 8 oct. 2018 a las 16:28

Aquí hay una solución para crear autocompletar sin JQUERY o sin JAVASCRIPT ... simplemente html5 un cuadro de entrada y una etiqueta de datalist.

<input type="text" id="txtAutoComplete" list="languageList"/><!--your input textbox-->
<datalist id="languageList">
<option value="HTML" />
<option value="CSS" />
<option value="JavaScript" />
<option value="SQL" />
<option value="PHP" />
<option value="jQuery" />
<option value="Bootstrap" />
<option value="Angular" />
<option value="ASP.NET" />
<option value="XML" />
</datalist>

Obtenga más información al respecto aquí

28
Cheezy Code 3 feb. 2016 a las 17:21