JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<input type="text">


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

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

JavaScript

var dataSource = ['mary', 'reeta', 'james'];

$("input").autocomplete({
    minLength: 1,
    source: function(request, response) {
        
        var matcher = new RegExp( '^' + $.ui.autocomplete.escapeRegex(request.term), "i" );
        var filteredData = $.grep( dataSource, function(value) {
            return matcher.test( value.label || value.value || value );
        });
        response(filteredData);
    }
});




       $(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;
            }
            });
        }

    });