Uncaught Typeerror is not a function について

前提・実現したいこと

以前質問した検索キーワード取得についてですが、他に並行して作っていた機能と組み合わせたらキーワード取得の結果を返すページに飛べなくなってしませんでした。
エラーログを見たらautocompleteのfunctionがない。と返されるのですが、移動先のページでCDNは指定しています。
キーワード取得機能単体だと動作するのですが組み合わせると他のjsと競合しているのかなとは思うのですが、どこを修正すべきかがわからないのでご教授頂きたいです。

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

Uncaught Typeerror: $(…) autocomplete is not a function
                                                     www//index.html#FormPage:3

該当のソースコード

index.html
1<!DOCTYPE HTML>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width, user-scalable=no">
6        <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7        <script src="components/loader.js"></script>
8        <link rel="stylesheet" href="components/loader.css">
9        <link rel="stylesheet" href="css/style.css">
10        <script src="js/cssua.min.js"></script>
11        <script src="js/app.js"></script>
12
13       
14   
15        
16       
17      <title>議事録</title>
18    </head>
19
20 <body>
21   <div data-role="page" id="Formaaa" data-theme="" align="left">
22     <header>
23       <p class="resize1">
24      <img class="small" src="./images/sakura.png">
25       </p>
26     </header>
27     <p class="resize3">
28        <img class="small" src="./images/giji4.png">
29     </p>
30     <br> 
31     <center>
32       <div  id="start"   data-theme="b" id="demo"  class="tab_area clearfix">
33        <li><a href="#LoginPage" onClick="sound19()">タップして開始</a></li>
34       </div>
35     </center>
36      <audio src="home.mp3" autoplay>
37      </audio>
38      <audio id="sound-file19" preload="auto">
39       <source src="taiko02.mp3" type="audio/mp3">
40      </audio>
41     <footer>
42       <p class="resize2">
43       <img class="small" src="./images/hujisan.png">
44       </p>
45     </footer>
46   </div>
47       <!-- ログインページ -->
48  <div data-role="page" id="LoginPage" data-theme="b" align="left">
49    <header data-role="header" data-position="fixed" data-theme="b">
50      <h1>ログイン画面</h1>
51    </header>
52      <section data-role="content">
53      <h1>ログイン</h1>
54      ユーザー名
55        <input type="text" id="login_username">
56      パスワード
57        <input type="password" id="login_password">
58      
59        <a href="#" id="LoginBtn" data-role="button" data-inline="false" data-theme="b">ログイン</a>
60         <a href="#RegisterPage" data-role="button" data-mini="true" data-inline="true" data-theme="b">新規登録</a>
61        <a href="#Formaaa" data-role="button" data-mini="true" data-inline="true" data-theme="b">戻る</a>
62      </section>
63  </div>
64
65  <!-- 登録ページ -->
66  <div data-role="page" id="RegisterPage">
67    <header data-role="header" data-position="fixed" data-theme="b">
68      <h1>ログイン</h1>
69    </header>
70      <section data-role="content">
71      <h1>新規登録</h1>
72      ユーザー名
73        <input type="text" id="reg_username">
74      パスワード
75        <input type="password" id="reg_password">
76        <a href="#" id="RegisterBtn" data-role="button" data-inline="false" data-theme="b">登録する</a>
77        <a href="#LoginPage" data-role="button" data-mini="true" data-inline="true" data-theme="b">戻る</a>
78      </section>
79  </div>
80//文字数制限のため関係ない部分は省略してあります
81  
82
83   
84	<center><h3>キーワード取得</h3></center>
85    <a href="keyword.html">キーワード取得</a>
86
87	
88 </body>
89</html>
90

ここからキーワード取得ページです
 <!DOCTYPE html>
<html>
    <head>
        <!-- StyleSheet CDN -->
        <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

        <!-- StyleSheet Custom -->
        <style>
            body {
                padding-top: 70px;
            }
        </style>

        <!-- JavaScript CDN -->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>


    <body>
      
        
        <!-- Main content -->
        <div class="container">
            <div class="jumbotron">
                <form>
                        
                        <input type="text" class="form-control" id="keyword" placeholder="キーワードを入力してください">
                </form>
            </div>
        </div>

        <script type="text/javascript">
            $(function() {
                $('#keyword').autocomplete({
                    source: function(request, response) {
                        $.ajax({
                            url: "https://www.google.com/complete/search",
                            data: {hl:'ja', client:'firefox', q: request.term},
                            dataType: "jsonp",
                            type: "GET",
                            success :function(data) {
                                response(data[1]);
                            }
                        });
                    },
                    autoFocus: true,
                    delay: 300,
                    minLength: 2,
                });
            });
        </script>
    </body>
</html>