jqueryの関数内で外部ファイルに定義した配列を読み込ませたい

初歩的な質問になってしまうかもしれませんが

jqueryUIでサジェスト機能を実装しようとしてます。
Jquery内のdata配列をHTML内に記述する書き方ではなく、
外部ファイル（csvやjs等）から読み込ませる仕様にしたいのですが
おすすめの実装方法等ございましたら教えていただきたいと存じます。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AutoCompleteウィジェット</title>
<link type="text/css" rel="stylesheet"
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
  src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {

  // ここの配列データをHTML内に書かず外部ファイル（csvやjs等）から読み込ませたい。
  var data = [
    'accepts',
    'action_name',
    'add',
    'add_column',
    'add_index',
    'add_timestamps',
    'after_create',
    'after_destroy',
    'after_filter',
    'all',
  ];

  // 2オートコンプリート機能を適用
  $('#txtKeywd').autocomplete({
    source: data,
    autoFocus: true,
    delay: 500,
    minLength: 2
  });
});
</script>
</head>
<body>
<!--1オートコンプリート機能を適用するテキストボックスを準備-->
<label for="txtKeywd">キーワード</label>：
<input id="txtKeywd" type="search" size="20" maxlengh="50" />
</body>
</html>

よろしくお願いいたします。

kei344

2019/06/07 10:37

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

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

回答3件

ベストアンサー

いちばん手抜きにするなら、JavaScriptファイルとして<script>で読み込むのが手っ取り早いです。

javascript
1// autocomplete_data.js
2  var autocompleteData = [
3    'accepts',
4    'action_name',
5    'add',
6    'add_column',
7    'add_index',
8    'add_timestamps',
9    'after_create',
10    'after_destroy',
11    'after_filter',
12    'all',
13  ];

html
1<script src="path/to/autocomplete_data.js"></script>
2<script type="text/javascript">
3$(function() {
4
5
6  // 2オートコンプリート機能を適用
7  $('#txtKeywd').autocomplete({
8    source: autocompleteData,
9    autoFocus: true,
10    delay: 500,
11    minLength: 2
12  });
13});
14</script>
15

投稿2019/06/07 08:28

maisumakun

総合スコア145183

shoco

2019/06/07 10:16 編集

回答ありがとうございます！無事想定とおりに動いてくれました。

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

scriptタグで読むのが手っ取り早いですが、一応JSONで読み込む方法を書きますね。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5<title>AutoCompleteウィジェット</title>
6<link type="text/css" rel="stylesheet"
7  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
8<script type="text/javascript"
9  src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
10<script type="text/javascript"
11  src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
12<script type="text/javascript">
13$(function(){
14  $.ajax({
15    type: 'GET',
16    url: 'data.json',
17    dataType: 'json'
18  }).done(function(data, textStatus, jqXHR){
19    $('#txtKeywd').autocomplete({
20      source: data,
21      autoFocus: true,
22      delay: 500,
23      minLength: 2
24    });
25  }).fail(function(jqXHR, textStatus, errorThrown){
26    // エラー処理
27    console.log(jqXHR);
28  });
29});
30</script>
31</head>
32<body>
33<!--1オートコンプリート機能を適用するテキストボックスを準備-->
34<label for="txtKeywd">キーワード</label>：
35<input id="txtKeywd" type="search" size="20" maxlengh="50" />
36</body>
37</html>

data.json ファイルを別ファイルとして作成

txt
1["accepts","action_name","add","add_column","add_index","add_timestamps","after_create","after_destroy","after_filter","all"]
2

投稿2019/06/07 09:12

foobar810

総合スコア217

shoco

2019/06/07 09:31

ありがとうございます！ JSONの基礎知識もあやふやだったので助かります！今後の参考にさせていただきます。

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

データ構造の簡易化や拡張を考えるならデータをjsonではくapiを用意するのが
賢明だと思います

投稿2019/06/07 09:01

yambejp

総合スコア114784

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

jqueryの関数内で外部ファイルに定義した配列を読み込ませたい

関連した質問