jquery 3.1.0 and jquery-ui autocomplete are not compatible, what's the workaround?

Question

I am having trouble getting jQuery 3.1.0 to work with jQuery UI's autocomplete feature.

The only workaround I know is by replacing jQuery 3.1.0 with the one that is prepackaged with the jQUERY UI installer. Unfortunately, this wouldn't work for me as the version in the installer package of jQuery UI doesn't allow me to use tags-input and other modern features that I require for my website.

<input type="email" id="tags" class="form-control" placeholder="Any Criteria" data-role="tagsinput">

<script type="text/javascript" src="external/jquery/js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="external/jquery-ui/js/jquery-ui.min.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
        });
      } );

Solution

Seems to be working just fine now:

https://jsfiddle.net/jphellemons/0ukbtgs4/

• jQuery 3.1.1
• jQuery ui 1.12.1

with your code:

<input type="email" id="tags" placeholder="Any Criteria">
<script type="text/javascript" src="external/jquery/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="external/jquery-ui/js/jquery-ui-1.12.1.min.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>

Comments

[mike510a]

You can use the Insert Snippet toolbar button to include formatted code into your answers (its the button with a < > on it)