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(", "))
        )

  
以上です。
よく使うのでメモしときました。

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた