• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

243
Vistas
The autocomplete-window is not popping up

I have this input which I want autocomplete with the script bellow. The url returns a list of strings. When I type, the data are shown in console however the autocomplete window does not pop up.

What might be wrong?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <input type="text" class="form-control my-input" name="from" id="from">

    <script>
        $(document).ready(function () {
            $("#from").keyup(function (string) {
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/complete?station=" + $(this).val(),
                    success: function (data) {
                        $("#from").autocomplete({
                            source: data
                        });
                        console.log(data)
                    }
                });
            });
        });
    </script>
</body>
</html>

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You should add jQuery-ui.min.css, jquery.min.js and jquery-ui.min.js files to the project. The following application, which I developed using mock data, works successfully. I called the getList() method in the error field to simulate the response from the server.

Application test image is available below:

enter image description here

Application source code is available below:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <title>Document</title>
</head>

<body>
  Input: <input type="text" id="inputElement" onkeyup="myFunction(this.value)">

  <script>
    function myFunction(value) {
      /* alert(`URL: http://127.0.0.1:5000/complete?station=${value}`); */
      $.ajax({
        type: "GET",
        url: "http://127.0.0.1:5000/complete?station=" + value,
        success: function (data) {
          if (data != '') {
            $("#inputElement").autocomplete({
              source: data
            });
            console.log(data)
          }
        },
        /* I simulated the successful response from the server in the field below. */
        error: function (data) {
          $("#inputElement").autocomplete({
            source: getList()
          });
        }
      });
    }

    function getList() {
      var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
        "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Scala",
        "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scheme"
      ];
      return availableTags;
    }
  </script>
</body>
</html>

almost 3 years ago · Juan Pablo Isaza Denunciar

0

This did it:

          $("#from").autocomplete({
          source: function (request, response) {
              $.ajax({
                  url: 'http://127.0.0.1:5000/complete?station=' + $("#from").val(),
                  dataType: "json",
                  success: function (data) {
                      response(data);
                  },
                  error: function (xhr, status, error) {
                      alert("Error");
                  }
              });
          }
      });
almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda