前提・実現したいこと
https://the-beatles.hateblo.jp/entry/2017/01/16/182038
↑
こちらのサイトを参考にして、オートコンプリート機能を利用した検索候補キーワード取得をスマホアプリ上で行いたい。
発生している問題・エラーメッセージ
・uncaught referenceerror $ is not defined
のメッセージが出ているがCDN部分はheadに書いてあるはず…
・スマホ上でのみオートコンプリート機能が動作しない、PCでは動作確認済みです。
該当のソースコード
javascript
1 <!DOCTYPE html> 2<html> 3 <head> 4 <title>Autocomplete</title> 5 <!-- StyleSheet CDN --> 6 <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> 7 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 8 9 <!-- StyleSheet Custom --> 10 <style> 11 body { 12 padding-top: 70px; 13 } 14 </style> 15 16 <!-- JavaScript CDN --> 17 <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 18 <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 19 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 20 </head> 21 22 23 <body> 24 <!-- Fixed navbar --> 25 <nav class="navbar navbar-default navbar-fixed-top"> 26 <div class="container"> 27 <div class="navbar-header"> 28 <a class="navbar-brand" href="#">Autocomplete</a> 29 </div> 30 <div id="navbar" class="navbar-collapse collapse"> 31 <ul class="nav navbar-nav"> 32 <li class="active"><a href="#">google</a></li> 33 </ul> 34 </div> 35 </div> 36 </nav> 37 38 <!-- Main content --> 39 <div class="container"> 40 <div class="jumbotron"> 41 <form> 42 <h1>Search keyword</h1> 43 <input type="text" class="form-control" id="keyword" placeholder="Please input keyword."> 44 </form> 45 </div> 46 </div> 47 48 <script type="text/javascript"> 49 $(function() { 50 $('#keyword').autocomplete({ 51 source: function(request, response) { 52 $.ajax({ 53 url: "https://www.google.com/complete/search", 54 data: {hl:'ja', client:'firefox', q: request.term}, 55 dataType: "jsonp", 56 type: "GET", 57 success :function(data) { 58 response(data[1]); 59 } 60 }); 61 }, 62 autoFocus: true, 63 delay: 300, 64 minLength: 2, 65 }); 66 }); 67 </script> 68 </body> 69</html> 70</body> 71</html> 72</body> 73</html>
試したこと
CDNの記述部の位置を変更したが効果なし
補足情報(FW/ツールのバージョンなど)
実行環境:monaca
回答1件
あなたの回答
tips
プレビュー