スキップしてメイン コンテンツに移動

Vue.jsでサジェスト入力を行う4つの方法

今回は、Vue.jsでサジェスト入力を行う方法を4つ(内1つは自作コンポーネント)紹介します。

サジェスト入力とは、入力途中に候補となるものを予測し、入力項目の下に候補として表示する機能です。Googleの検索窓で何か文字を入力すると、下に候補でてくるあれです。

Vue.jsでサジェスト入力

方法1 HTML5のautocomplete属性を使う

HTML5のアイコン

HTML5で追加されたautocomplete属性を使うと、Vue.jsでも簡単にサジェスト入力が実現できます。

<input>要素のautocomplete属性は、<input>要素に文字を入力すると、その文字を含む候補を提示して、内容を自動補完することができます。

入力候補のデータのリストをは、 同じくHTML5で追加された<datalist>を使用します。<datalist>は、 フォームの入力欄などで入力候補となるデータリストを定義します。

以下サンプルコードです。

<input type="text" name="yourarea" autocomplete="on" list="food"/>  
<datalist id="food">  
  <option v-for="n in ['ハンバーガー','てりやきバーガー','ポテト']" :key="n">{{n}}</option>
</datalist>

上記のコードで、入力欄に「バーガー」と入力すると、次のイメージのように「バーガー」の文字を含む候補が表示されます。表示された候補を矢印キーまたはマウスで選択すると、選択した候補をサジェスト入力できます。

HTML5のautocomplete属性でサジェスト入力するイメージ

方法2. vue-simple-suggestを使う

vue-simple-suggest

上で紹介したHTML5のautocomplete属性は、IOSには対応していないため、スマホ対応する必要があるサイトの場合あは、これから紹介する「vue-simple-suggest」のような
を使う必要があります。

「vue-simple-suggest」は、その名の通りVue.jsでシンプルにサジェスト入力ができるライブラリです。早速使い方を見ていきましょう。

インストール

npmまたはyarn経由でライブラリをインストールします。

# npmの場合
npm install --save vue-simple-suggest
# yarnの場合
yarn add vue-simple-suggest

上記以外に、Unpkg等でもライブラリは公開されています。詳しくは以下のリンク参照。
https://www.npmjs.com/package/vue-simple-suggest#installation

使う

以下が、「vue-simple-suggest」を使ったサンプルコードです。

<template>
	<vue-simple-suggest
	  v-model="selected"
	  :list="simpleSuggestionList"
	  :filter-by-query="true">
	</vue-simple-suggest>
</template>

<script>
import VueSimpleSuggest from 'vue-simple-suggest'
import 'vue-simple-suggest/dist/styles.css' // Using a css-loader

export default {
  components: {
    VueSimpleSuggest
  },
  data() {
    return {
      selected: null,
      simpleSuggestionList: ['ハンバーガー','てりやきバーガー','ポテト']
    }
  }
}
</script>

実行結果

上のコードを実行すると、次のイメージのような実行結果になります。若干サジェスト入力のポップアップの反応が悪いですが、「vue-simple-suggest」でもキーワードを含む候補が、サジェスト入力できます。

「vue-simple-suggest」を使ったサジェスト入力の実行結果

方法3. vue-cool-selectを使う

vue-cool-select

「vue-cool-select」も、Vue.jsでサジェスト入力を可能するライブラリです。実際の動きは、デモサイトで確認できます。

では早速使い使い方を見ていきましょう。

インストール

npmまたはyarn経由でライブラリをインストールします。

# npmの場合
npm install --save vue-cool-select
# yarnの場合
yarn add vue-cool-select

使う

公式サイトのサンプルコードのままですが、「vue-cool-select」を使ったサンプルコードです。

<template>
  <div>
    <cool-select v-model="selected" :items="items" placeholder="Select name" />
  </div>
</template>

<script>
import { CoolSelect } from "vue-cool-select";

export default {
  components: {
    CoolSelect
  },
  data() {
    return {
      selected: null,
      items: ["Anton", "Andrey", "Sasha", "Vladimir", "Dima"]
    };
  }
};
</script>

実行結果

上のコードを実行すると、次のイメージのような実行結果になります。Coolという名前が付いているライブラリだけあって、かなり快適にサジェスト入力ができます。

「vue-cool-select」を使ったサジェスト入力の実行結果

方法4. vue-suggest-inputを使う

4つ目は、恐縮ながら私は作成したサジェスト入力できるvueコンポーネントです。どんな動きをするのかは、以下のGIFアニメを見てください。

コンポーネントの実行イメージ

インストール

npmでインストールできます。

npm i vue-suggest-input --save

シンプルなサンプル

シンプルな使い方のサンプルコードです。とにかくシンプルにすぐ使えるを目標に作ったコンポーネントで、デフォルトのcssをインポートすれば、見た目のデザインも某大手検索エンジンのように装飾しています。

<template>
  <div style="width:400px">
    <vue-suggest-input v-model="selected" :items="items"/>
  </div>
</template>
<script>
import VueSuggestInput from 'vue-suggest-input'
import 'vue-suggest-input/dist/vue-suggest-input.css'

export default {
  components: {
    VueSuggestInput
  },
  data() {
    return {
      items: ['apple','cocoa','coffee','cola'],
      selected: "",
    }
  }
}
</script>

さいごに

今回は、Vue.jsでサジェスト入力をする為の方法を4つ紹介してきました。HTML5のautocomplete属性がIOSにも実装されれば、外部のライブラリに頼らずにサジェスト入力できるのですが、現状はスマホサイトにも対応する場合は、今回紹介した「vue-simple-suggest」や「vue-cool-select」などのVue.jsのプラグインを使う必要がありそうです。

また、今回紹介したvueコンポーネントのサンプルコードは、最もシンプルな使い方のソースです。各コンポーネントはサジェスト入力のポップアップに独自のテンプレートを表示させたり、色々表示内容をカスタマイズできます。

気になった方は、npmの公式サイトで使い方が詳しく書かれていますので、見てみてください。

  • vue-simple-suggest

https://www.npmjs.com/package/vue-simple-suggest#custom-suggestion-item

  • vue-cool-select

https://www.npmjs.com/package/vue-cool-select

スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

このブログの人気の投稿

axiosの使い方まとめ (GET/POST/例外処理)

axiosの使い方まとめ (GET/POST/例外処理)最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。GETリクエストをaxiosで送るまずはGETリクエストをaxiosで送る方法です。const res =await axios.get('/users') console.log(res.data)分割代入の記法を使うと、以下のようにも書けますconst{data}=await axios.get('/users') console.log(data)クエリパラメータ (URLパラメータ)を指定クエリパラメータを指定する方法は2つあります。1つ目は、axios.getに指定するURLに直接記述する方法です。axios.get('/user?id=123')2つめは、axios.getの第2引数に、オプション指定する方法です。axios.get('/user',{ params:{ id:123}})POSTリクエストをaxiosで送る次はPOSTリクエストをaxiosで送る方法です。JSON形式でPOSTするJSON形式でPOSTする場合は、axios.postの第2引数に、送信するデータをJavaScriptオブジェクトで指定します。const res =await axios.post('/user',{ id:123, name:'Yamada Tarou'})application/x-www-form-urlencoded形式でPOSTするapplication/x-www-form-urlencoded形式でPOSTする場合は、URLSearchParamsを使います。var params =newURLSearchParams() params.append('id',123) params.append('name','Yamada Tarou')const res =await axios.post('/user', params)axios でファイルをアップロードする画像などのファイルを、axiosでアッ…

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決する

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決するタイトルの通りですが、Windows 8 以降では Windows Form アプリケーションで、コントロールの ImeMode に Katakana や KatakanaHalf を設定しても、カタカナになってくれません。なぜ ImeMode が効かないのか?Windows 8 以降、IME Mode の切り替えは、ユーザー単位で切り替わるようになった為、アプリから IME Mode 制御が出来ないようになりました。
(IME をON にした場合、常に ひらがな モードになます)※ Windows 7までは、IME Modeの切り替えはアプリ単位で行われていた為、問題なくアプリから IME制御が行えました。対処方法Windows 8 以降、IMEの制御は、InputScope クラスの利用が推奨されています。
しかし、InputScope クラスは、WPF、Windows ストアアプリでしか使えない為、Windows Formアプリでは使用できません。
(Windows Form はもう使うな!という事でしょうか (涙) )結論としては、コントールパネルの設定で、IMEの制御をユーザ単位から アプリ単位に変更する事ができます。
これで、Windows Formアプリでも 従来通りIMEの制御を行う事が出来ます。おわりにこの方法だと、アプリをインストールする端末すべてに設定が必要となり、とっても面倒です。。。
しかし、今の所これしか方法がない状態です。
これからは Windows Formではなく、WPFや Windows ストアアプリで作れという事ですかね (^^;)

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…