JSFiddle - React, Tailwind, and code Playground

by Kevin SAADATJOO

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

    <div class="container-fluid">
        <h1 class="text-center">Indeed Jobs Search Demo</h1>
    </div>

    <div class="container-fluid">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <input type="hidden" name="city" id="locality" value="Paris">
            <input type="hidden" name="country" id="country" value="fr">
            <div class="row">
                <input class="col-md-5" name="term" placeholder="What" value=""> 
                <input class="col-md-6" id="autocomplete" type="text" placeholder="City, Country" value="Paris, France"> 
                <button type="submit" class="col-md-1 btn btn-xs btn-warning"><i class="fa fa-search"></i></button>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>
    <div id="dataTable" class="container-fluid"></div>

JavaScript

// prepare the data    
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                dataType: "jsonp",
		type: 'GET',
		timeout: 5000,
		cache: true,
                dataFields: [
                    { name: 'jobtitle', type: 'string' },
                    { name: 'source', type: 'string' },
                    { name: 'formattedLocation', type: 'string' },
                    { name: 'snippet', type: 'string' },
                    { name: 'formattedRelativeTime', type: 'string' }
                ], 
                url: 'http://api.indeed.com/ads/apisearch',
            };

            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        $.extend(data, {
                            publisher: '3460202540737800',
                            q: '%webmaster%',
                            l: 'New york',
                            sort: 'date',
                            radius: '1500',
                            st: '',
                            jt: 'fulltime',
                            start: '',
                            fromage: '180',
                            filter: '1',
                            latlong: '1',
                            co: 'us',
                            chnl: '',
                            userip: '1.2.3.4',
                            useragent: 'Mozilla/%2F4.0%28Firefox%29',
                            v: '2',
                            format: 'json',
                            limit: '2000'
                        });
                        return data;
                    }
                }
            );
            
            // create jqxDataTable.
            $("#dataTable").jqxDataTable(
            {
                source: dataAdapter,
                pageable: true,
                altRows: true,
                filterable: true,
                height:...