Mariah
Mariah

Reputation: 127

Autocomplete not working with array of values

I have read all posts related jQuery 3.3.1 and jQuery-UI 1.12.1 but I couldn't get the solution. This is my code and its not working.

<link href="lib/jquery-ui/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />

<div class="ui-widget">
  <span>Enter Language Name: </span><input id="Language">
</div>
<script src="lib/jquery/dist/jquery.js"></script>
<script src="lib/jquery-ui/jquery-ui.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.js"></script>
<script>
  var tech = [
    "Asp",
    "Basic",
    "Java",
    "Php",
    "Typescript",
    "Ruby",
    "Python",
    "Angular"
  ];
  $('#Language').autocomplete({
    data: tech
  });
</script>

Upvotes: 1

Views: 730

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

There is no data property in the autocomplete() settings. If you're providing an array of values to use in the control you need to use source. I'd suggest reading the documentation.

var tech = [
  "Asp",
  "Basic",
  "Java",
  "Php",
  "Typescript",
  "Ruby",
  "Python",
  "Angular"
];
$('#Language').autocomplete({
  source: tech
});
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="ui-widget">
  <span>Enter Language Name: </span><input id="Language">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Upvotes: 1

Related Questions