JQuery UI AutoComplete Implementation not working

jquery html jquery-ui css autocomplete

14,172

Solution 1

Have You Tried this :

<html>

<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function() {
            var availableTags = [
                "United States",
                "France",
                "Germany",
                "China",
                "Australia",
                "England",
                "Saouth Korea",
                "India"
            ];
            $("#tags").autocomplete({
                source: availableTags
            });
        });
    </script>
</head>

<body>
    <label for="tags">Tags: </label>
    <input id="tags" placeholder="Enter Some Text…">
</body>

</html>

you can try demo here : demo

Solution 2

You're missing quotes around the closing tag:

$("#currentList").append("<div class='item'>" + toAdd + </div>);

Should be:

$("#currentList").append("<div class='item'>" + toAdd + "</div>");

14,172

Author by

sbru

Updated on June 05, 2022

Comments

sbru almost 2 years

I am trying to implement the autocomplete provided with JQuery UI and I was wondering how I could do this by putting the source code provided:

  <script>
  $(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
  </script>

into my script.js file. In my .html file i have:

    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script type="text/javascript" src="script.js"></script>

where script.js is my .js file. I have tried putting this in my .js file:

$(document).ready(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL"
    ];
    $( "#tags" ).autocomplete({
       source: availableTags
    });
});

and this in my .html file:

<form class="ui-widget" name="phoneForm">
    <label for="tags">Tags: </label>
    <input id="tags" name="phoneItem" placeholder="Add a Phone"/>
</form>

but this doesn't work. Can anyone help me out as to what I am doing wrong and point me in the write direction? Thanks!