Is it possible to use this code (or convert it) with a different jQuery version?

In my project im jusing jQuery 3.5.1 and this code doesn’t work with that version. My question is, if it is possible to convert this code to be usable with jQuery 3.5.1 This is probably a stupid question but I’m pretty new to jquery…

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Autocomplete - Multiple values</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.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"
        ];
        function split( val ) {
          return val.split( /,s*/ );
        }
        function extractLast( term ) {
          return split( term ).pop();
        }
     
        $( "#tags" )
          // don't navigate away from the field on tab when selecting an item
          .on( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).autocomplete( "instance" ).menu.active ) {
              event.preventDefault();
            }
          })
          .autocomplete({
            minLength: 0,
            source: function( request, response ) {
              // delegate back to autocomplete, but extract the last term
              response( $.ui.autocomplete.filter(
                availableTags, extractLast( request.term ) ) );
            },
            focus: function() {
              // prevent value inserted on focus
              return false;
            },
            select: function( event, ui ) {
              var terms = split( this.value );
              // remove the current input
              terms.pop();
              // add the selected item
              terms.push( ui.item.value );
              // add placeholder to get the comma-and-space at the end
              terms.push( "" );
              this.value = terms.join( ", " );
              return false;
            }
          });
      } );
      </script>
    </head>
    <body>
     
    <div class="ui-widget">
      <label for="tags">Tag programming languages: </label>
      <input id="tags" size="50">
    </div>
     
     
    </body>
    </html>

This code isn’t mine I got it from: https://jqueryui.com/autocomplete/#multiple I made a JSFiddle with 3.5.1 to show you the error it gives: https://jsfiddle.net/cm3thL0r/

Index:

<html>
<head>
    <?php
    include "includes/include.php";
    ?>
    <style>
        a {
            /* Styles for anchors without href */
            cursor:pointer;
        }
    </style>
    <title>Kenniscentrum</title>

</head>
<body>

<!--    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

        <div class="body">

            <div class="w-75 mx-auto mt-3">

                <?php

                echo "<form method='post' id='backToMain' action=''>";
                echo "</form>";


                echo "<form method='post' id='backToSub'>";
                echo "<input type='hidden' name='rubriek' value='".$_POST['rubriek']."'>";
                echo "</form>";

                    if(isset($_POST['rubriek'] , $_POST['subrubriek'])){

                        echo "<a class='text-primary' ";
                        ?>onclick="document.getElementById('backToMain').submit();"<?php
                        echo " >Rubrieken > </a>";


                        echo "<a class='text-primary' ";
                        ?>onclick="document.getElementById('backToSub').submit();"<?php
                        echo " >Sub-Rubrieken > </a>"; echo "Artikel";

                    }
                    else if(isset($_POST['rubriek'])){
                        echo "<a class='text-primary' ";
                        ?>onclick="document.getElementById('backToMain').submit();"<?php
                        echo " >Rubrieken > </a> Sub-Rubrieken";
                    }
                    else if(!isset($_POST['subrubriek'])){
                        echo 'Rubrieken';
                    }
                ?><button class="btn btn-success float-right mr-3" data-bs-toggle="modal" data-bs-target="#modalCreate">Nieuw</button>
            </div>

            <table id="example" class="mt-3 w-75 table table-striped table-bordered mx-auto">

                <th>Naam</th>
                <?php
                    if(isset($_POST['rubriek'] , $_POST['subrubriek'])){
                        getAllArtikel();
                    }
                    else if(isset($_POST['rubriek'])){
                        getAllSubRubriek();
                    }
                    else if(!isset($_POST['subrubriek'])){
                        getAllRubriek();
                    }
                ?>

            </table>
        </div>

        <?php
        include "includes/Modals/modal.php";
        include "includes/Modals/modalEdit.php";
        include "includes/Modals/modalEditRubriek.php";
        include "includes/Modals/modalEditSubrubriek.php";
        include "includes/Modals/modalDelete.php";
        include "includes/Modals/modalDeleteRubriek.php";
        include "includes/Modals/modalDeleteSubrubriek.php";
        include "includes/Modals/modalCreate.php";
        ?>

        <script  src="includes/script.js"></script>

    </body>
</html>

includes:

    <?php
include "dbconn.php";
include "phpFunctions.php";
?>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

Some parts might be dutch sorry about that….

Answer

As you can see all work with jquery 3.5, i just change <script src="https://code.jquery.com/jquery-1.12.4.js"></script> with cdn of 3.5

$( 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"
        ];
        function split( val ) {
          return val.split( /,s*/ );
        }
        function extractLast( term ) {
          return split( term ).pop();
        }
     
        $( "#tags" )
          // don't navigate away from the field on tab when selecting an item
          .on( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).autocomplete( "instance" ).menu.active ) {
              event.preventDefault();
            }
          })
          .autocomplete({
            minLength: 0,
            source: function( request, response ) {
              // delegate back to autocomplete, but extract the last term
              response( $.ui.autocomplete.filter(
                availableTags, extractLast( request.term ) ) );
            },
            focus: function() {
              // prevent value inserted on focus
              return false;
            },
            select: function( event, ui ) {
              var terms = split( this.value );
              // remove the current input
              terms.pop();
              // add the selected item
              terms.push( ui.item.value );
              // add placeholder to get the comma-and-space at the end
              terms.push( "" );
              this.value = terms.join( ", " );
              return false;
            }
          });
      } );
<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Autocomplete - Multiple values</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script
      src="https://code.jquery.com/jquery-3.5.1.js"
      integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
      crossorigin="anonymous"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    </head>
    <body>
     
    <div class="ui-widget">
      <label for="tags">Tag programming languages: </label>
      <input id="tags" size="50">
    </div>
     
     
    </body>
    </html>

Leave a Reply

Your email address will not be published. Required fields are marked *