JSFiddle - React, Tailwind, and code Playground

by jack2ky

HTML

<div class="header">
    <img src="../september_logo.png" alt="">
    <div class="location"><a href="#end">Location</a>

    </div> <a href="autocomplete/browse.html" class="browse">Browse</a>
 <a href="../index.html">Home</a>
 <a href="../drag.html">Drag and drop</a>

</div>
<div id="w">
    <div id="content">
        <div class="instructions">
             <h1>Start tpyping  The  food that you want below once you you have choosen your selection it will appear bellow
</h2>
        </div>
      <div id="searchfield">
        <form><input type="text" class="biginput" placeholder= "Start typing in food, like BBq chicken or coleslaw"id="autocomplete"></form>
      </div><!-- @end #searchfield -->
      
      <div id="outputbox">
        <p id="outputcontent">Your choices will appear here<br></p> 
        <div class="table"></div>
      </div>
    </div><!-- @end #content -->
  </div><!-- @end #w -->

CSS

#content {
      height: 100%;
  }
  html {
      background-color: #ccc;
  }
  body {
      height: 100%;
  }
  tr {
      position: relative;
      border-radius: 20px;
  }
  td:nth-child(1) {
      /*  background-color: yellow;*/
      display: inline-block;
      padding-left: 0;
      /*position: relative;*/
  }
  table td:first-child {
      -moz-border-radius:10px;
      border-radius:10px
  }
  table td:last-child {
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px
  }

JavaScript

/**
 *  Ajax Autocomplete for jQuery, version 1.2.7
 *  (c) 2013 Tomas Kirda
 *
 *  Ajax Autocomplete for jQuery is freely distributable under the terms of an MIT-style license.
 *  For details, see the web site: http://www.devbridge.com/projects/autocomplete/jquery/
 *
 */
(function (e) {
    "function" === typeof define && define.amd ? define(["jquery"], e) : e(jQuery)
})(function (e) {
    function g(a, b) {
        var c = function () {}, c = {
            autoSelectFirst: !1,
            appendTo: "body",
            serviceUrl: null,
            lookup: null,
            onSelect: null,
            width: "auto",
            minChars: 1,
            maxHeight: 300,
            deferRequestBy: 0,
            params: {},
            formatResult: g.formatResult,
            delimiter: null,
            zIndex: 9999,
            type: "GET",
            noCache: !1,
            onSearchStart: c,
            onSearchComplete: c,
            containerClass: "autocomplete-suggestions",
            tabDisabled: !1,
            dataType: "text",
            lookupFilter: function (a, b, c) {
                return -1 !== a.value.toLowerCase().indexOf(c)
            },
            paramName: "query",
            transformResult: function (a) {
                return "string" === typeof a ? e.parseJSON(a) : a
            }
        };
        this.element = a;
        this.el = e(a);
        this.suggestions = [];
        this.badQueries = [];
        this.selectedIndex = -1;
        this.currentValue = this.element.value;
        this.intervalId = 0;
        this.cachedResponse = [];
        this.onChange = this.onChangeInterval = null;
        this.isLocal = this.ignoreValueChange = !1;
        this.suggestionsContainer = null;
        this.options = e.extend({}, c, b);
        this.classes = {
            selected: "autocomplete-selected",
            suggestion: "autocomplete-suggestion"
        };
        this.initialize();
        this.setOptions(b)
    }
   ...