Vue.jsでインクリメントサーチ

Vue.js

2018.09.202018.09.21

Vue.jsのお勉強。

配列からインクリメントサーチをするサンプルです。
配列のサンプルはココのを使わせてもらいました。

JSONデータから日本の都市一覧を配列に入れてリスト表示して、検索窓に入力されたキーワードでフィルタしているイメージです。

サンプルはこちら。

参考：フィルタの置き換え-Vue

以下、ソース。
Javascriptの20行目以降の算出プロパティ(Computed:）でフィルタするようです。

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Cities</title>
        
     </head>
    <body>
        <div id="app">
            検索欄：<input type="text" v-model="searchQuery">
            <ul v-for="city in filterCity">
                <li>{{ city }}</li>
            </ul>
        </div>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
        <script src="main.js"></script>
    </body>
</html>

JavaScript

var cityList = [];

$(function() {
    $.getJSON("current.city.list.json")
    .done(function(data) {
        $(data).each(function() {
            if( this.country === 'JP'){
                cityList.push(this.name);
            }
        })
    });
});

var app = new Vue({
    el: '#app',
    data: {
        searchQuery: '',
        cities: cityList,
    },
    computed: {
        filterCity: function(){
            var self = this
            return self.cities.filter(function (city) {
              return city.indexOf(self.searchQuery) !== -1;
            })

        }
    }
  })

大文字、小文字を区別なく検索する場合は、算出プロパティを以下のように記述します。

    computed: {
        filterCity: function(){
            // 大文字・小文字の区別なく検索できるようにRegExpを使用する。
            var self = this;
            var matcher = new RegExp( this.searchQuery, 'i' );
            return self.cities.filter(function (city) {
              return matcher.test( city );
            })

        }
    },