/
atom.xml
121 lines (91 loc) · 3.87 KB
/
atom.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[Category: jquery-ui | @znz blog]]></title>
<link href="http://blog.n-z.jp/blog/categories/jquery-ui/atom.xml" rel="self"/>
<link href="http://blog.n-z.jp/"/>
<updated>2014-04-09T09:49:24+09:00</updated>
<id>http://blog.n-z.jp/</id>
<author>
<name><![CDATA[Kazuhiro NISHIYAMA]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[jQuery UI Autocomplete を自動で開く]]></title>
<link href="http://blog.n-z.jp/blog/2013-09-18-auto-open-autocomplete.html"/>
<updated>2013-09-18T15:43:00+09:00</updated>
<id>http://blog.n-z.jp/blog/auto-open-autocomplete</id>
<content type="html"><![CDATA[<p>Google カレンダーの時刻入力のように combobox 的な入力欄で、
デフォルトは選択肢から選んで、
選択肢にないときは直接入力も出来るようにしたいと思いました。</p>
<p>いくつかの方法を試した結果、
jQuery UI の Autocomplete に少しコードを足したら
希望通りの挙動に出来ました。</p>
<!--more-->
<h2>HTML5 の datalist と autocomplete</h2>
<p>最初は HTML5 の datalist 要素を試しました。
<code>simple_form</code> gem を使っているので、
以下のように書きました。</p>
<p><code>haml
= f.input :drink, input_html: { autocomplete: "on", list: "drink_list" }
%datalist#drink_list
%options(value="不要")
%options(value="水")
%options(value="お茶")
%options(value="コーヒー")
</code></p>
<p>この方法の問題点としては、
IE は IE10 (以降?) しか対応していなかったり、
Mobile Safari も対応してなさそうだったりして
対応環境が微妙だったのと、
入力欄にフォーカスだけで自動で開くという挙動が出来なくて、
矢印の上下で開く必要があったので、
諦めました。</p>
<h2>Bootstrap Typeahead</h2>
<p>挙動としては
HTML5 の datalist の方法や
jQuery UI Autocomplete と似ていたのですが、
Bootstrap 3 では外されているという話があったり、
別途新しい typeahead.js が開発されているという話があったりして、
先にある程度 jQuery UI Autocomplete を試していたこともあり、
別途新しいライブラリを入れるなどの深追いはせずに
jQuery UI Autocomplete を使うことにしました。</p>
<h2>jQuery UI Autocomplete</h2>
<p><code>jquery-ui-rails</code> gem を使っていて、
必要なものだけ CSS や JS を require していたので、
まず <code>app/assets/stylesheets/application.css</code> に</p>
<p><code>text application.css
*= require jquery.ui.autocomplete
</code></p>
<p>を追加しました。</p>
<p>次に <code>app/assets/javascripts/autocomplete.js.coffee</code> として
以下のような内容で作成しました。</p>
<p>```coffeescript autocomplete.js.coffee</p>
<h1>= require jquery.ui.autocomplete</h1>
<p>jQuery –>
drink_list = [</p>
<pre><code>"不要"
"水"
"お茶"
"コーヒー"
</code></pre>
<p> ]
$(“#somemodel_drink”).autocomplete</p>
<pre><code>source: drink_list
autoFocus: true
delay: 0
minLength: 0
</code></pre>
<p> .on “focus”, –></p>
<pre><code>$("#somemodel_drink").autocomplete("search", "")
</code></pre>
<p>```</p>
<h2>余談</h2>
<p>今回の話とは直接は関係ないのですが、
ファイルを細かく分割すると管理しやすくなるのは良いのですが、
他のライブラリの中のファイル名と重ならないようにしないと
<code>bootstrap.js.coffee</code> の中で <code>#= require bootstrap</code> しても
自分自身を <code>require</code> してしまって空っぽになって悩むことに
なるので注意が必要でした。</p>
]]></content>
</entry>
</feed>