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)}var h={extend:function(a,b){return e.extend(a,b)},createNode:function(a){var b=document.createElement("div");b.innerHTML=a;return b.firstChild}};g.utils=h;e.Autocomplete=g;g.formatResult=function(a,b){var c="("+b.replace(RegExp("(\\/|\\.|\\*|\\+|\\?|\\||\\(|\\)|\\[|\\]|\\{|\\}|\\\\)","g"),"\\$1")+")";return a.value.replace(RegExp(c,"gi"),"<strong>$1</strong>")};g.prototype={killerFn:null,initialize:function(){var...