CODEWITHSUNDEEP
javascriptjqueryjson
Niang Moore
Niang Moore

Reputation: 506

Javascript autocomplete not working

I'm trying to get autocomplete text from rest api, the below code is not working. How can I embed it inside

  $(function() {
    $.getJSON("http://localhost:8080/restapiResult/states", function(data) {
      $("#name").autocomplete({
        source: data
      });
    });
  });

Upvotes: 0

Views: 2621

Answers (3)

user8311754
user8311754

Reputation: 

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

Upvotes: 0

g4ost
g4ost

Reputation: 100

USE JQUERY UI they provide an example code on their page which I will include before. This is a working example of JQUERY UI autocomplete right from their website.

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

Upvotes: 1

Akshay
Akshay

Reputation: 805

try this

$('#name').on("keydown", function(e) {
    $.getJSON("http://localhost:8080/restapiResult/states", function(data) {
      $("#name").autocomplete({
        source: data
      });
    });
  });

Upvotes: 0

Related Questions