jquery - jqueryで選択ボックスの変更時にJSONをgrepする方法

Question

データを見つけて JSON オブジェクトから表示することに関しては、私はまだ少し初心者なので、それが何の価値があるかについての質問を受け付けて、できるだけ詳しく説明するように努めます。

変更イベントの選択ボックスでオプションの値を取得し、JSON オブジェクトから入力されたリストをフィルター処理する jQuery を作成するのに少し助けが必要です。

基本的に私が最終的に到達しようとしているのは、JSON オブジェクトを受け取り、ユーザーが変更イベントでそのリストをフィルターできるようにする、多次元のファセット ナビゲーション モデルです。

少し漠然とした内容だとは思いますが、可能な限り質問にお答えします。

JSについてこれまでに持っているものは次のとおりです。

function getBeers(){
    $.grep(getBeerType, function(key, val){
      $.getJSON('includes/data.json', function(data) {
        var beers = [];

        $.each(data, function(key, val) {
          beers.push('<li id="' + key + '">' + val + '</li>');
        });

        $('<ul/>', {
          html: items.join('')
        }).appendTo('#beerlist');
      });
    });
  };

  $("#beerselector").change(function(){
    var getBeerType = $(this).val();
    getBeers(getBeerType);
  });

そしてJSON：

{"beers":[
        {
            "name":"Surly Wet",
            "type":"Ale"
        },
        {
            "name":"Spaten Oktoberfest",
            "type":"Lager"
        },
        {
            "name":"Pliny the Elder",
            "type":"Ale"
        },
        {
            "name":"Summit IPA",
            "type":"Ale"
        },
        {
            "name":"Surly Coffee Bender",
            "type":"Porter"
        },
        {
            "name":"Lagunitas IPA",
            "type":"Ale"
        }
]}

および HTML:

  <label for="beerselector">What's your favorite beer type?</label>
  <select id="beerselector">
    <option value="">I like all beer</option>
    <option value="ale">Ales</option>
    <option value="lager">Lagers</option>
  </select>

  <div id="beerlist"></div>