テキストボックスの入力でリストをフィルタする

はじめに

  • テキストボックスに入力すると、リストの中から部分一致でフィルタします。
  • 表示されたリストが 1 件になったとき Enter するとリンクを表示します。
  • リンクは別ウィンドウを開きます。
  • リストは JSON 形式の別ファイルです。

実際の表示

    コード

    HTML

    <input type="text" id="input">
    <ul id="output"></ul>

    JavaScript

    $(function() {
      var list
      var hits = []
      // リスト取得
      $.ajax({
        url: '/cmp/parts/list-filter/prefectures.json'
      })
      .done(function(data) {
        list = data
      })
      .fail(function() {
        alert('ページを読み直してください')
      })
      // イベント処理
      $(window).on('load', function() {
        $('#input').trigger('input')
      })
      $('#input').on({
        'input': update,
        'keypress': typeEnter})
      $('#output').on('click', 'a', function(event) {
        event.preventDefault();
        var url = $(this).attr('href')
        goLink(url)
      })
      // 関数
      function update() {
        $('#output').empty()
        var input = $(this).val()
        if (input !== '') {
          hits = list.filter(function(index) {
            return (index.name.indexOf(input) > -1)
          })
          for (var i = 0; i <= hits.length - 1; i++) {
            $('#output').append('<li><a class="pref-link" href="' + hits[i].url + '">' + hits[i].name + '</a></li>')
          }
        } else {
          for (var i = 0; i <= list.length - 1; i++) {
            $('#output').append('<li><a class="pref-link" href="' + list[i].url + '">' + list[i].name + '</a></li>')
          }
        }
      }
      function typeEnter(event) {
        if (hits.length == 1 && event.keyCode == 13) {
          goLink(hits[0].url)
        }
      }
      function goLink(url) {
        window.open(url, '', 'width=500, height=500, menubar=0, toolbar=1, status=1, scrollbars=1, resizable=1')
      }
    })

    JSON

    [
    {
    "name": "北海道",
    "url": "http://www.pref.hokkaido.lg.jp/"
    },
    {
    "name": "青森県",
    "url": "http://www.pref.aomori.lg.jp/"
    },
    {
    "name": "岩手県",
    "url": "http://www.pref.iwate.jp/"
    },
    {
    "name": "宮城県",
    "url": "http://www.pref.miyagi.jp/"
    },
    {
    "name": "秋田県",
    "url": "http://www.pref.akita.lg.jp/"
    },
    {
    "name": "山形県",
    "url": "http://www.pref.yamagata.jp/"
    },
    {
    "name": "福島県",
    "url": "http://www.pref.fukushima.lg.jp/"
    },
    {
    "name": "茨城県",
    "url": "http://www.pref.ibaraki.jp/"
    },
    {
    "name": "栃木県",
    "url": "http://www.pref.tochigi.lg.jp/"
    },
    {
    "name": "群馬県",
    "url": "http://www.pref.gunma.jp/"
    },
    {
    "name": "埼玉県",
    "url": "http://www.pref.saitama.lg.jp/"
    },
    {
    "name": "千葉県",
    "url": "http://www.pref.chiba.lg.jp/"
    },
    {
    "name": "東京都",
    "url": "http://www.metro.tokyo.jp/"
    },
    {
    "name": "神奈川県",
    "url": "http://www.pref.kanagawa.jp/"
    },
    {
    "name": "新潟県",
    "url": "http://www.pref.niigata.lg.jp/"
    },
    {
    "name": "富山県",
    "url": "http://www.pref.toyama.jp/"
    },
    {
    "name": "石川県",
    "url": "http://www.pref.ishikawa.lg.jp/"
    },
    {
    "name": "福井県",
    "url": "http://www.pref.fukui.lg.jp/"
    },
    {
    "name": "山梨県",
    "url": "http://www.pref.yamanashi.jp/"
    },
    {
    "name": "長野県",
    "url": "http://www.pref.nagano.lg.jp/"
    },
    {
    "name": "岐阜県",
    "url": "http://www.pref.gifu.lg.jp/"
    },
    {
    "name": "静岡県",
    "url": "http://www.pref.shizuoka.jp/"
    },
    {
    "name": "愛知県",
    "url": "http://www.pref.aichi.jp/"
    },
    {
    "name": "三重県",
    "url": "http://www.pref.mie.lg.jp/"
    },
    {
    "name": "滋賀県",
    "url": "http://www.pref.shiga.lg.jp/"
    },
    {
    "name": "京都府",
    "url": "http://www.pref.kyoto.jp/"
    },
    {
    "name": "大阪府",
    "url": "http://www.pref.osaka.lg.jp/"
    },
    {
    "name": "兵庫県",
    "url": "http://web.pref.hyogo.lg.jp/"
    },
    {
    "name": "奈良県",
    "url": "http://www.pref.nara.jp/"
    },
    {
    "name": "和歌山県",
    "url": "http://www.pref.wakayama.lg.jp/"
    },
    {
    "name": "鳥取県",
    "url": "http://www.pref.tottori.lg.jp/"
    },
    {
    "name": "島根県",
    "url": "http://www.pref.shimane.lg.jp/"
    },
    {
    "name": "岡山県",
    "url": "http://www.pref.okayama.lg.jp/"
    },
    {
    "name": "広島県",
    "url": "http://www.pref.hiroshima.lg.jp/"
    },
    {
    "name": "山口県",
    "url": "http://www.pref.yamaguchi.lg.jp/"
    },
    {
    "name": "徳島県",
    "url": "http://www.pref.tokushima.jp/"
    },
    {
    "name": "香川県",
    "url": "http://www.pref.kagawa.lg.jp/"
    },
    {
    "name": "愛媛県",
    "url": "http://www.pref.ehime.jp/"
    },
    {
    "name": "高知県",
    "url": "http://www.pref.kochi.lg.jp/"
    },
    {
    "name": "福岡県",
    "url": "http://www.pref.fukuoka.lg.jp/"
    },
    {
    "name": "佐賀県",
    "url": "http://www.pref.saga.lg.jp/"
    },
    {
    "name": "長崎県",
    "url": "http://www.pref.nagasaki.lg.jp/"
    },
    {
    "name": "熊本県",
    "url": "http://www.pref.kumamoto.jp/"
    },
    {
    "name": "大分県",
    "url": "http://www.pref.oita.jp/"
    },
    {
    "name": "宮崎県",
    "url": "http://www.pref.miyazaki.lg.jp/"
    },
    {
    "name": "鹿児島県",
    "url": "http://www.pref.kagoshima.jp/"
    },
    {
    "name": "沖縄県",
    "url": "http://www.pref.okinawa.lg.jp/"
    }
    ]

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です