Bootstrap Typeaheadの日本語入力対応

2013/02/25 (2018/02/09更新) カテゴリー:開発奮闘記 タグ: ,
SPONSOR
  • このエントリーをはてなブックマークに追加

Bootstrapに入っているTypeheadは、フォームに入力している途中で、候補文字が出てきて補完してくれる便利な機能です。こんな機能をかんたんに導入することができて、最高なんですが、日本語入力に対応していないという致命的欠点があります。

SPONSOR

Typeaheadが日本で使えない

まずはじめに、英語だと文字の変換なんてありませんから、英単語を入力している途中で候補が出てきて、矢印キーで選択してエンターというのが想定しているBootstrapが想定している流れです。

しかし、日本語は変換してエンターという操作があります。このせいで、変換候補を選んでエンターを押した時点でTypeaheadも選択されたことになってしまうのです。

ちなみにオンライン見積書・請求書発行ツール「CLPRO」でも、項目入力時に使っていますので、日本語対応の修正を行いました。
clpro

Typeaheadを修正

bootstrap.jsを少し変更するだけで、対応出来ました。ちょうど1969行目あたり。

  , render: function (items) {
      var that = this

      items = $(items).map(function (i, item) {
        i = $(that.options.item).attr('data-value', item)
        i.find('a').html(that.highlighter(item))
        return i[0]
      })

      //items.first().addClass('active')
      this.$menu.html(items)
      return this
    }

items.first().addClass(‘active’)をコメントアウトすれば、変換した後のエンターは無効になります。

  • このエントリーをはてなブックマークに追加

おすすめの記事

SPONSOR
IRITECはITエンジニアが「コンテンツで集客・広告収入を得る」「お客様の話をきいて価値を提案できる」 「自分で考えたアプリで収益を上げる」など、エンジニアが生き残っていくための情報をお届けしているビジネスハックメディアです。

COMMENT

コメントをどうぞ

RELATION

関連する記事

SPONSOR

RECOMMEND

おすすめの記事

SPONSOR

TAG

タグから記事をさがす

PROFILE

イリテクのプロフィール

イリテクはWEBシステム・スマホアプリ開発を得意とする制作会社です!
入江 慎吾/イリテク株式会社 代表取締役
1982年生まれ。長崎県 五島列島出身。福岡のWeb制作会社で10年間、ディレクション、Webデザイン、システム開発に従事。 その後、趣味で始めたiPhoneアプリ開発をきっかけにフリーランスとして独立後、2014年にイリテク株式会社として法人化。(もっと詳しいプロフィール)
SPONSOR

PRODUCT

イリテクで開発したプロダクト