Как отобразить данные API, введя почтовый индекс в строку поиска? - PullRequest
Новая
       22

Как отобразить данные API, введя почтовый индекс в строку поиска?

0 голосов
/ 04 ноября 2019

В настоящее время у меня есть строка поиска ввода с кнопкой отправки и кодом, который будет отображать данные API, которые я хочу. Однако в URL-адресе для API указывается местоположение почтового индекса «5KL FK1», как показано в разделе «area = FK1% 205LD». То, как данные отображаются и форматируются, прекрасно работает для меня. Но я хотел бы иметь возможность вводить почтовый индекс "FK1 5LD" в строку поиска ввода, и когда я нажимаю кнопку отправки, он отображает данные API, которые я уже закодировал.

Спасибо!

Панель поиска и кнопка HTML

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

Javascript для отображения информации API 

<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>

1 Ответ

1 голос
/ 04 ноября 2019

Возможно, вы пропустили отметку - но вы просто хотите, чтобы данные вызывались для того, что в данный момент введено в поле поиска, верно? Если это так, то это нужно сделать - просто нужно сделать несколько ссылок на элементы и выставить конец URL для обновлений. 

<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>
...