jQueryのautocompleteでselectの処理が走らずエラーが表示されます。原因がわかる方いらっしゃいましたらお力を貸して頂きたいです。

前提・実現したいこと

jQueryのautocompleteでサジェスト機能を実装しているのですが、select時の処理を記入したのですが、エラーが表示されます。
こちらエラーを出さずに処理を走らせるにはどうすればよろしいでしょうか？

発生している問題・エラーメッセージ

Uncaught TypeError: $(...).autocomplete is not a function

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <title>Document</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <main>
    <p><input type="text" id="suggest"></p>
    <div id="dashboard_div" style="text-align: center;">
      <!--Divs that will hold each control and chart-->
      <div id="chart_div"></div>
      <table width=800px style="display: none;">
        <tr>
          <td width="50%" align="center">
            <span style="position: relative; top: 8px;">範囲</span>
            <div style="margin-top: 10px;" id="filter_div"></div>
            <!-- <span style="color: white;">0</span> -->
          </td>
          <td width="50%" align="center">幅:
            <span id="bucketSize" style="color:#999; font-size: 15px; text-decoration: none;"></span>
              <input id="bucketSlider" type="hidden" class="bucketSlider" value="0" onchange="changeOptions();"
                style="margin-top: 0px;" />
          </td>
  
        </tr>
      </table>
   </div>
  </main>
    <script>
      $(function(){
        var json = [];
          let hostUrl = "http://localhost:3000/hits/";
          $(function() {
                  $.ajax({
                      url: hostUrl,
                      type: "GET",
                      cache: false,
                      dataType: "json"
                  }).done(function(data){
                    json = data;
                    const arr = json.filter(function(value){
                      return value.itemCode !== "";
                    });
                    const suggest = arr.map((x) => {      
                      return {'label' : x.itemName.toString() , 'value' :x.itemCode.toString()};
                    });
                    console.log(suggest);
                    $('#suggest').autocomplete({
                      source: suggest,
                      select: function(e,ui){
                        if(ui.item){
                          var _id = ui.item.itemCode;
                          alert(ui.item);
                        }
                      }
                    });
              });
      });
    });



   
    </script>
</body>
</html>

試したこと

別の場所で呼び出しましたが、変わらずエラーが出ます。。

$('#suggest').autocomplete({

                  select: function(e,ui){
                    if(ui.item){
                      var _id = ui.item.itemCode;
                      alert(ui.item);
                    }
                  }
                });

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

html
1    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
2    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
3    <title>Document</title>
4    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
5    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>