Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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
        });
      } );

like image 702
ArsedianIvan Avatar asked Sep 07 '16 13:09

ArsedianIvan


1 Answers

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>
like image 108
JP Hellemons Avatar answered Oct 11 '22 13:10

JP Hellemons