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

Use an older version of jQuery which is supported by the version of jQueryUI you're using — Rory McCrossan, Sep 07 '16 at 13:52
If you know EXACTLY what the conflict is, you can remove the conflicting code from either library (you would need to have libraries local and not external e.g. not CDN) — The One and Only ChemistryBlob, Sep 07 '16 at 13:55

score 6 · Accepted Answer · answered Oct 26 '16 at 12:04

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>

score 0 · Answer 2 · edited Jan 10 '17 at 08:36

0

jQuery 3.1.1
jQuery ui 1.12.1

$("#Your-Input").on('keypress', function() {
    $.ajax({
        url: 'http://www.somehost.ru',
        dataType: "json",
        data: {
            text: $("#Your-Input").val()
        }
    })
    .done(function(result) {
        //your handler here
    });
});

edited Jan 10 '17 at 08:36

Tushar

85,780
21
159
179

answered Jan 10 '17 at 08:31

Alluniko

1

You can use the Insert Snippet toolbar button to include formatted code into your answers (its the button with a `< >` on it) – mike510a Jan 10 '17 at 08:36

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

2 Answers2

Linked