Tripsorter search in jquery

See more:

Javascript

jQuery

API

search

I've given a task to complete. I need to search the tripsorter results on click of a button in jquery which will find the complete continuous path to go from a city to another, considering different sorting types (cheapest or fastest).Input is taken from two select box from user and I have to display the sorted trip

Basically, i am using $.getJSON of jquery because JSON data is stored locally in my root folder, I know how to call JSON data with jquery but I am not able to perform the search functionality according to the user inputs

Can someone help me to get started, or at least explain what needs to be done, in a way I can understand?

pdf for instructions is attached https://www.docdroid.net/01NlQ8u/mycrm-trip-sorter-frontend.pdf.html

JSON data link https://api.myjson.com/bins/16bwqz

What I have tried:

<form class="form search-form">
                    <div class="form-group">
                      <select class="form-control" id="from">
                       <option selected hidden>From</option>
                       <option value="london">London</option>
                       <option value="paris">Paris</option>
                       <option value="amsterdam">Amsterdam</option>
                       <option value="warsaw">Warsaw</option>
                       <option value="brussels">Brussels</option>
                       <option value="stockholm">Stockholm</option>
                       <option value="prague">Prague</option>
                       <option value="moscow">Moscow</option>
                       <option value="madrid">madrid</option>
                       <option value="geneva">Geneva</option>
                       <option value="budapest">Budapest</option>
                       <option value="kiew">Kiev</option>
                       <option value="lisbon">Lisbon</option>
                       <option value="rome">Rome</option>
                       <option value="athens">Athens</option>
                       <option value="istanbul">Istanbul</option>
                   </select>
                    </div>

                    <div class="form-group">
                        <select class="form-control" id="to">
                       <option selected hidden>to</option>
                       <option value="london">London</option>
                       <option value="paris">Paris</option>
                       <option value="amsterdam">Amsterdam</option>
                       <option value="warsaw">Warsaw</option>
                       <option value="brussels">Brussels</option>
                       <option value="stockholm">Stockholm</option>
                       <option value="prague">Prague</option>
                       <option value="moscow">Moscow</option>
                       <option value="madrid">madrid</option>
                       <option value="geneva">Geneva</option>
                       <option value="budapest">Budapest</option>
                       <option value="kiew">Kiev</option>
                       <option value="lisbon">Lisbon</option>
                       <option value="rome">Rome</option>
                       <option value="athens">Athens</option>
                       <option value="istanbul">Istanbul</option>
                   </select>
                    </div>

                    <div class="form-group" id="radio_btn">
                        <label class="radio-inline"><input value="cheap" id="radio_cheap" type="radio" name="opt">Cheapest</label>
                        <label class="radio-inline"><input value="fast" id="radio_fast" type="radio" name="opt">Fastest</label>
                    </div>

                    <button id="search_btn" type="button"> Search</button>
                    <button id="reset_btn" type="button"> Reset</button>
                </form>

Jquery

$(function () {
var from_city = $("#from").val();
var to_city = $("#from").val();

$("#search_btn").click(function () {
    $.getJSON("data.json", function (data) {
        console.log(data);
        var output = "<ul class='list-group'>";
        $.each(data, function (key, val) {
            output += "<li class='list-group-item'>";
            output += "<h4>" + val.reference + "</h4>";
            output += "</li>";
        });
        output += "</ul>";
        $("#update").html(output);
    });
  });
});