teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問jQuery UI Autocompleteでサーバに問い合わせるときに、termの他にセレクトボックスで選択された値を渡したい

編集履歴

質問編集履歴

7

2017/05/16 22:53

投稿

badtz
badtz

スコア14

test CHANGED
File without changes
test CHANGED
File without changes

6

2017/05/16 22:53

投稿

badtz
badtz

スコア14

test CHANGED
File without changes
test CHANGED
@@ -2,38 +2,92 @@
2
2
 
3
3
  <script>
4
4
 
5
- $(function(){
5
+ $(function(){
6
6
 
7
- $('#input').autocomplete({
7
+ $('#input').autocomplete({
8
8
 
9
- source:"/autocomplete/" + $('#id').attr('value')
9
+ source:"/autocomplete/" + $('#id').attr('value')
10
10
 
11
- });
11
+ });
12
12
 
13
- });
13
+ });
14
14
 
15
15
  </script>
16
+
17
+
18
+
19
+ <select id="id">
20
+
21
+ <option value="A">A</option>
22
+
23
+ <option value="B">B</option>
24
+
25
+ </select>
26
+
27
+ <input id="input" type="text">
16
28
 
17
29
  ```
18
30
 
19
31
 
20
32
 
21
- idのセレクトボックスでoptionを選択した後に、フォーム入力する際にoptionで選択されたvalueをautocompleteに渡したいのですが、うまく渡すことができません。
33
+ `id`のセレクトボックスで`option`を選択した後に、フォーム入力する際に`option`で選択された`value`をautocompleteに渡したいのですが、うまく渡すことができません。
22
34
 
23
- $('#id')はselect要素を指定しているのですが、autocomplete実行時にはjqueryのオブジェクトに置き換わっており、そのために$('#id').attr('value')は未定義となってしまいます。
35
+ `$('#id')`は`select`要素を指定しているのですが、autocomplete実行時にはコンソールで確認するとjqueryのオブジェクトに置き換わっており、そのために`('#id').attr('value')`は未定義となってしまいます。
24
36
 
25
37
 
26
38
 
27
- 何か良い方法はありますか？
39
+ 何か良い方法はありますか？
28
40
 
29
- 上記はURLに情報を付加して渡そうと考えた例です。
41
+ 上記はURLに情報を付加して渡そうと考えた例です。
30
42
 
31
43
 
32
44
 
33
- ご回答、ご指摘ありがとうございます。
45
+ ご回答、ご指摘ありがとうございます。
34
46
 
35
- autocompleteのsource部分にfunctionを利用することは考えたのですが、サーバ側でどのようにリクエストを受け取るかのサンプルが少なく断念しました。
47
+ autocompleteの`source`部分に`function`を利用することは考えたのですが、サーバ側でどのようにリクエストを受け取るかのサンプルが少なく断念しました。
36
48
 
37
49
 
38
50
 
39
- サーバサイドはPythonのBottleを使用しております。
51
+ サーバサイドはPythonの`Bottle`を使用しております。
52
+
53
+
54
+
55
+ ```
56
+
57
+ @route('/autocomplete/<value>', method=['GET'])
58
+
59
+ def autocomplete(value):
60
+
61
+
62
+
63
+ list = []
64
+
65
+
66
+
67
+ if value == 'A':
68
+
69
+ list.append('AAA')
70
+
71
+ elif value == 'B':
72
+
73
+ list.append('BBB')
74
+
75
+
76
+
77
+ list_json = json.dumps(list)
78
+
79
+
80
+
81
+ r = HTTPResponse(status=200, body=list_json)
82
+
83
+ r.set_header('Content-Type', 'application/json')
84
+
85
+
86
+
87
+ return r
88
+
89
+ ```
90
+
91
+
92
+
93
+ サーバでは上記のように候補のレスポンスを返したいと考えておりました。

5

2017/05/16 22:45

投稿

badtz
badtz

スコア14

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,13 @@
18
18
 
19
19
 
20
20
 
21
- idのセレクトボックスでoptionを選択した後に、フォーム入力する際にoptionで選択されたvalueをautocompleteに渡したいのですが、うまく渡すことができません。何か良い方法はありますか？
21
+ idのセレクトボックスでoptionを選択した後に、フォーム入力する際にoptionで選択されたvalueをautocompleteに渡したいのですが、うまく渡すことができません。
22
+
23
+ $('#id')はselect要素を指定しているのですが、autocomplete実行時にはjqueryのオブジェクトに置き換わっており、そのために$('#id').attr('value')は未定義となってしまいます。
24
+
25
+
26
+
27
+ 何か良い方法はありますか？
22
28
 
23
29
  上記はURLに情報を付加して渡そうと考えた例です。
24
30
 

4

2017/05/16 21:16

投稿

badtz
badtz

スコア14

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ′′′
1
+ ```
2
2
 
3
3
  <script>
4
4
 
@@ -14,10 +14,20 @@
14
14
 
15
15
  </script>
16
16
 
17
- ′′′
17
+ ```
18
18
 
19
19
 
20
20
 
21
21
  idのセレクトボックスでoptionを選択した後に、フォーム入力する際にoptionで選択されたvalueをautocompleteに渡したいのですが、うまく渡すことができません。何か良い方法はありますか？
22
22
 
23
23
  上記はURLに情報を付加して渡そうと考えた例です。
24
+
25
+
26
+
27
+ ご回答、ご指摘ありがとうございます。
28
+
29
+ autocompleteのsource部分にfunctionを利用することは考えたのですが、サーバ側でどのようにリクエストを受け取るかのサンプルが少なく断念しました。
30
+
31
+
32
+
33
+ サーバサイドはPythonのBottleを使用しております。

3

2017/05/16 21:02

投稿

badtz
badtz

スコア14

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,5 @@
1
+ ′′′
2
+
1
3
  <script>
2
4
 
3
5
  $(function(){
@@ -12,6 +14,8 @@
12
14
 
13
15
  </script>
14
16
 
17
+ ′′′
18
+
15
19
 
16
20
 
17
21
  idのセレクトボックスでoptionを選択した後に、フォーム入力する際にoptionで選択されたvalueをautocompleteに渡したいのですが、うまく渡すことができません。何か良い方法はありますか？

2

2017/05/16 20:53

投稿

badtz
badtz

スコア14

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  $(function(){
4
4
 
5
- $('#input_keyword').autocomplete({
5
+ $('#input').autocomplete({
6
6
 
7
7
  source:"/autocomplete/" + $('#id').attr('value')
8
8
 

1

2017/05/15 22:26

投稿

badtz
badtz

スコア14

test CHANGED
File without changes
test CHANGED
@@ -15,3 +15,5 @@
15
15
 
16
16
 
17
17
  idのセレクトボックスでoptionを選択した後に、フォーム入力する際にoptionで選択されたvalueをautocompleteに渡したいのですが、うまく渡すことができません。何か良い方法はありますか？
18
+
19
+ 上記はURLに情報を付加して渡そうと考えた例です。