jQuery UI サーバーからデータを取得して自動補完する
jQuery Autocomplete はRailsアプリとか作ってるとタグ付けでよく使う。
複数タグを登録できるようにしたいよね。
coffee
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
# Autocomplete for tagging
if $('.tag-autocomplete').length
inputField = $('.tag-autocomplete')
# Don't navigate away from the field on tab when selecting an item
inputField.bind( "keydown", (event) ->
if event.keyCode == $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active
event.preventDefault()
)
inputField.autocomplete(
source: (request, response) ->
lastWord = request.term.split(',').pop().trim()
$.get('/users/interest_list?tag=' + lastWord).done((json) ->
response(json)
)
,
focus: (event, ui) ->
# Ignoere this
return false;
,
select: (event, ui) ->
# Need this becaues select update input text automatically.
event.preventDefault()
# Make array
tags = this.value.split(/,\s*/)
# Remove the current input because it not needed any more.
tags.splice(-1, 1)
# Add the selected item.
tags.push(ui.item.value)
# Set complete text
tags.push("")
$(this).val(tags.join(", "))
)
以上です。
よく使うのでメモしときました。