ajaxを利用して、非同期で検索をしているのですが、表示されません。

Question

私は、現在ajaxを利用して、非同期で検索ができるようにしたいと考えています。しかし、送信ボタンを押しても、検索ができていない状態になっています(エラーは発生していません)。もしわかる方がいらしたら、どうぞ教えて頂きたいです。どうぞよろしくお願い致します。

参考にしたページ
https://qiita.com/__tambo__/items/409ccf256e84017ea307

def index
    @meals = Event.where("event_name LIKE(?)", "%#{params[:keyword]}%")
end

<input id="meal_form" style="display: inline-block; position: absolute; width: 20px; height: 20px; left: 30px; width: 160px; border: unset;">
<input id="submit_form" type="submit" style="display: inline-block; position: absolute; width: 20px; height: 20px; left: 0;">
<ul class="meal_list">
</ul>    
                    

views/events/index.json.builder

json.array! @meals do |meal|
  # meal.nameがjsonデータのnameに代入されます
  # json.〇〇の〇〇がデータから値を取り出す時に使う変数名となります
  json.name meal.name
end

search_result.js

$(function(){
  $("#submit_button").click(function(){ //送信ボタンを押すとイベントが発火します
    var input = $("#meal_form").val(); // フォームの値を'input'という名前の変数に代入します
    $.ajax({
      type:'GET', // リクエストのタイプはGETです
      url: '/events', // URLは/mealsを指定します。つまりmeals#indexのアクションをリクエストします
      data: {keyword: input}, // コントローラへフォームの値を送信します
      dataType: 'json' // データの型はjsonで指定します
    })
    .done(function(data){
      // 通信に成功した場合の処理です
      $('.meal_list').empty(); //前回の検索結果が残っている場合はそれを消します
      data.forEach(function(meal){
        $('.meal_list').append(`<li>${meal.event_name} </li>`);
        //データは配列形式でかえってくるので、forEachで繰り返し処理をします
        //ここではデータの単数の変数名をmealと置いていますが、何でも構いません。
        //ただし、値を取り出す場合は"ここで定義した変数名"."json.jbuilderで定義した〇〇(この例ではname)"で取得します。
      }) 
    })
    .fail(function(){
      // 通信に失敗した場合の処理です
      alert('検索に失敗しました') // alertで検索失敗の旨を表示します
    })
  })
})