vue-simple-suggestで読み仮名でもサジェストさせる

背景・課題

• 漢字でリスト表示していても、ひらがな入力時点でサジェストさせたい
• 漢字に変換するまでサジェストがされないのが不便すぎる

vue-simple-suggestのサジェストをカスタマイズする

使っていたのは、vue-simple-suggestでした。既にスタイルが当たっていたのでどうにかしてこれを使いたかったです。
https://github.com/KazanExpress/vue-simple-suggest

結論としては、display-attributeと、filterを指定すれば実装できました。
（ドキュメントに書いてあるけど、filterの指定はわからなさすぎてソースコード読みました ）
display-attributeで、どのkeyの値をサジェストのリストに表示するかを指定できます。
filterは入力された値に対してリストの値をどう返すか処理が書けます。

以下は、listDataが[{ name: "hogehoge", kana: "ほげほげ"}]みたいな配列になっている前提でのサンプルコードです。(nuxt.js)

<vue-simple-suggest
    :value="value"
    display-attribute="name"
    :list="listData"
    :filter="vueSimpleSuggestfilter"
    :filter-by-query="true"
    :max-suggestions="100"
/>

 data () {
    return {
      listData: [{ name: "hogehoge", kana: "ほげほげ"}]
    }
  },
  methods: {
    vueSimpleSuggestfilter (el, value) {
      return el.name.indexOf(value) !== -1 || el.kana.indexOf(value) !== -1 ? el : false
    },

elにlistで指定した値が一つずつ入ってきて、valueに入力値が入ってきます。
returnした値がサジェストのリストとして表示されます。
拡張したら、カタカナとかアルファベットも追加できますね