在单页ajax上实现浏览器后退按钮

Question

您好我正在尝试在我的单页应用程序上实现浏览器后退按钮我正在使用ajax来加载内容。我无法弄清楚我是如何实现这一点的。我真的是前端的新手。

<script>
  $( function() {
  $( "#SearchItem" ).autocomplete({
  source: "{{ route('search') }}"
  });
  $("#SearchItem").keypress(function(e) {
  $('#SearchItem').addClass('loadinggif');
  $('#results').addClass('loadinggif');
  $('#results').show();
  $value=$('#SearchItem').val();
  $.ajax({
    type : 'get',
    url :"{{ route('phone') }}",
    data: {'SearchItem':$value},
    success:function(data){
      $('#results').html(data);
      $("#SearchItem").removeClass("loadinggif");
      $(".loading").removeClass("loadinggif");

         }
       });
      })
    });
  </script>

这是我在上面的脚本使用的地方！            

  <div class="search mx-auto" style="width: 35%; margin-top:100px;">
    <input type="text" class="form-control" name="SearchItem" 
       id="SearchItem" placeholder="Search..." >

  <!-- results displayed here -->
  <div class="results" id="results" style="margin-top:40px;">
  <div class = "loading"></div>

</div>

请帮帮我！