如何通过在搜索栏中输入邮政编码来显示 API 数据？

Question

我目前有一个带有提交按钮和代码的输入搜索栏，可以显示我想要的 API 数据。但是，在 API 的 URL 中，它将位置设置为邮政编码 "FK1 5LD"，如您所见 "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>

Answer 1

可能错过了标记 - 但您只想调出当前在搜索字段中输入的任何数据，对吗？如果是这样，这应该可以做到 - 只需要进行一些元素引用并公开 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>

如何通过在搜索栏中输入邮政编码来显示 API 数据？

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

html

javascript

api

jquery

searchbar