I want to be able to post all the information of the selected list link onto the page

I want to be able to post all the information of the selected list link onto the page

This is the format of the json file i am using
  2.     {
  3.         "year": 2013,
  4.         "title": "Rush",
  5.         "info": {
  6.             "directors": ["Ron Howard"],
  7.             "release_date": "2013-09-02T00:00:00Z",
  8.             "rating": 8.3,
  9.             "genres": [
  10.                 "Action",
  11.                 "Biography",
  12.                 "Drama",
  13.                 "Sport"
  14.             ],
  15.             "image": "https://ia.media-imdb.com/images/M/MV5BMTQyMDE0MTY0OV5BMl5BanBnXkFtZTcwMjI2OTI0OQ@@._V1_SX400_.jpg",
  16.             "plot": "A re-creation of the merciless 1970s rivalry between Formula One rivals James Hunt and Niki Lauda.",
  17.             "rank": 2,
  18.             "running_time_secs": 7380,
  19.             "actors": [
  20.                 "Daniel Bruhl",
  21.                 "Chris Hemsworth",
  22.                 "Olivia Wilde"
  23.             ]
  24.         }
    
i want to post all the information of the selected link in the drop down list onto the html page. only certain data is shown on the drop-down list but i want all the information to be shown on the page once the user clicks on the specific link.
  2. <!DOCTYPE html>
  3. <html>
  4.  <head>

  6.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  8.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  9.   <style>
  10.   #result {
  11.    position: absolute;
  12.    width: 100%;
  13.    max-width:870px;
  14.    cursor: pointer;
  15.    overflow-y: auto;
  16.    max-height: 400px;
  17.    box-sizing: border-box;
  18.    z-index: 1001;
  19.   }
  20.   .link-class:hover{
  21.    background-color:#f1f1f1;
  22.   }
  23.   </style>
  24.  </head>
  25.  <body>
  26.   <br /><br />
  27.   <div class="container" style="width:900px;">
  28.    <h2 align="center">Search for a Movie</h2>
  29.    <h3 align="center">Movie Data</h3>
  30.    <br /><br />
  31.    <div align="center">
  32.     <input type="text" title="search" id="search" placeholder="Search Movie Details" class="form-control" />
  33.    </div>
  34.    <ul  class="list-group" id="result"> </ul>
  35. <p>
  36. </p>
  37.    <br />

  39.   </div>
  40.   <script>
  41.   $(document).ready(function(){
  42.    $.ajaxSetup({ cache: false });
  43.    $('#search').keyup(function(){
  44.     $('#result').html('');
  45.     $('#state').val('');

  47.     var searchField = $('#search').val();
  48.     var expression = new RegExp(searchField, "i");
  49.     $.getJSON('MovieData.html', function(data) {
  50.      $.each(data, function(key, value){
  51.       if (value.title.search(expression) != -1)
  52.       {

  54.       $('#result').append('<li class="list-group-item link-class"><img src="'+value.image+'" height="203" width="144" class="img-thumbnail" /> '+value.title+' | <span class="text-muted">'+value.info.genres+'</span></li>');
  55.       }
  56.      });
  57.     });
  58.    });

  60. $(document).ready(function(){
  61.    $('#result').on('click', 'li', function() {
  62.      var $this = $(this);
  63.      var $alias = $this.data('alias');
  64.      $('.active').removeClass('active');
  65.      $this.toggleClass('active')

  67.      myfuncation($this, $alias)
  68.    })
  69.    function myfuncation($this, $alias){
  70.      console.log($this.text());
  71.      console.log($alias);
  72.    }
  73. });
  74.    });
  75.   </script>


  78.  </body>
  79. </html>
  80. This is what the list looks like and i want to show all the details of the movie once it has been clicked.
  81. Any help will be greatly appreciated