How to display API data by entering a postcode into a search bar?

I currently have an input search bar with a submit button and code that will display the API data that I want. However, in the URL for the API, it sets the location to the postcode “FK1 5LD” as you can see the section “area=FK1%205LD”. The way the data is displayed and formatted works perfectly for me. But I would like to be able to type in the postcode “FK1 5LD” into the input search bar and when I click the submit button, it would display the API data I have already coded.

Thank you!

Search Bar and Button HTML

<input name="search" placeholder="Search.." type="text"><button>Search</button>

Javascript to display API information

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

</head>
<body>

<script>
   $(function() {
        $.ajax({
        url: "http://api.lmiforall.org.uk/api/v1/census/jobs_breakdown?area=FK1%205LD",
       method: "GET",
        dataType: "json",
        success: function(data) {
            var str = "";          
           for(var i= 0; i < data.jobsBreakdown.length; i++){

             str +='Job Title : '+data.jobsBreakdown[i].description+' <br> Total Number of People Engaged in Occupency : '+data.jobsBreakdown[i].value+' <br> Percentage of Occupancies in Area : '+data.jobsBreakdown[i].percentage.toPrecision(2)+'% <br><br>';
           }
          $("body").html(str);
        }
        });
    });
</script>

Answer

Might have missed the mark – but you just want to have the data call out for whatever is currently typed into the search field right? If so this should do it – just need to make a few element references and expose the end of the url for updates.

<input id="mySearchField" name="search" placeholder="Search.." type="text">

<button id="mySearchButton">Search</button>
<div id="myContentArea></div>


<script>

       $(function() {
        var _myContentArea = document.getElementById("myContentArea");
        var _mySearchButton = document.getElementById("mySearchButton");
        _mySearchButton.onclick = getData;

        function getData(){
        var _mySearchField = document.getElementById("mySearchField");
            $.ajax({
            url: "http://api.lmiforall.org.uk/api/v1/census/jobs_breakdown?area="+_mySearchField.value,
           method: "GET",
            dataType: "json",
            success: function(data) {
                var str = "";          
               for(var i= 0; i < data.jobsBreakdown.length; i++){

                 str +='Job Title : '+data.jobsBreakdown[i].description+' <br> Total Number of People Engaged in Occupency : '+data.jobsBreakdown[i].value+' <br> Percentage of Occupancies in Area : '+data.jobsBreakdown[i].percentage.toPrecision(2)+'% <br><br>';
               }
              _myContentArea.innerHTML = str;
            }
            });
        }

    });
    </script>

Advertisement

Answer