CODEWITHSUNDEEP
jqueryhtmljquery-uicssautocomplete
sbru
sbru

Reputation: 887

JQuery UI AutoComplete Implementation not working

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!

Upvotes: 2

Views: 16233

Answers (5)

Anil Yadav
Anil Yadav

Reputation: 39

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

Upvotes: 3

myfashionhub
myfashionhub

Reputation: 435

You're missing quotes around the closing tag:

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

Should be:

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

Upvotes: 1

sbru
sbru

Reputation: 887

So it turns out the code I have up there is 100% working and the reason is doesn't work is because of other code I tried to implement. I wanted to be able to click a button that will add the string in the autocomplete UI to a list on the page, so I tried doing this:

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

    $("#addButton").click(function() {
        var toAdd = $("input[name=phoneItem]").val();
        $("#currentList").append("<div class='item'>" + toAdd + </div>);
    });
});

This not only doesn't work, but it causes the autocomplete and everything else in my .js file to not work either. Any thoughts as to why this is the case would be helpful, thanks again to everyone!

Upvotes: 0

Steely Wing
Steely Wing

Reputation: 17597

Here is a basic setup for jQuery UI, http://jsfiddle.net/steelywing/bZP9A/

index.html

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
</head>
<body>
<label for="tags">Tags: </label>
<input id="tags" />
<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 src="auto.js"></script>
</body>
</html>

auto.js

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

Upvotes: 0

sampoh
sampoh

Reputation: 3065

Be sure not to include HTML elements in .js files. (Take <script> ... </script> out). Make sure to have script.js in the same folder directory as your HTML file.

Now in JavaScript (script.js):

// First line is a short for $(document).ready(function(){ ... });
    $(function() { 
        var availableTags = [
          "ActionScript",
          "AppleScript",
          "Asp",
          "BASIC",
          "C",
          "C++",
          "Clojure",
          "COBOL"
        ];

        $( "#tags" ).autocomplete({
          source: availableTags
        });

    });

In HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <script type="text/javascript" src="script.js"></script>

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

    </head>

    <body>
        <form>
            Autocompleted field: <input id="tags" type="text"  placeholder="Fill me" />
        </form>
    </body>

</html>

Pay attention that in the HTML input element we have id="tags", and in JavaScript we use $("#tags") to point out to that HTML element.

Now you should be set!

Upvotes: 0

Related Questions