JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <input class="autocomplete" type="text" />
</div>

JavaScript

var mySource = [{
  value: "Equipment Search",
  url: 'https://uhaul.net/equipment/default.aspx'
}, {
  value: "Equipment Search Dev",
  url: 'https://uhauld.net/equipment/default.aspx'
}, {
  value: "Equipment Search QA",
  url: 'https://uhaulq.net/equipment/default.aspx'
}, {
  value: "FCSF",
  url: 'http://posdev.uhi.amerco/aspnet35/POSLogin/Login.aspx?AppName=Console&ConsoleApp=CSF'
}, {
  value: "Hitch Matrix",
  url: 'https://mit.uhi.amerco/secure/aspnet4/hitchmatrix/manage_hitches.aspx'
}, {
  value: "Kiosk Dev",
  url: 'http://mitdev.uhi.amerco/aspnet3/kioskadmin/'
}, {
  value: "Kiosk",
  url: 'https://pos.uhaul.net/secure/kioskadmin/'
}, {
  value: "MOAS",
  url: 'https://uhauld.net/tools/inventory_control/login_main.aspx?ReturnUrl=%2ftools%2finventory_control%2fOrderApproval.aspx%20'
}, {
  value: "POS Admin",
  url: 'https://cia.uhi.amerco/POSAdmin'
}, {
  value: "QA Tool Dev",
  url: 'http://mitdev.uhi.amerco/aspnet4/NewQAAdmin/login.aspx'
}, {
  value: "QA Tool",
  url: 'https://uhiweb.amerco.org/QAAdmin/login.aspx'
}, {
  value: "RT Admin Tool",
  url: 'https://pos.uhaul.net/secure/rta/login/adminlogin'
}, {
  value: "Uchat Dev",
  url: 'https://uhauld.net/tools/uchat_app/publish.htm'
}, {
  value: "Uchat",
  url: 'https://uhaul.net/tools/uchat_app/publish.htm'
}, {
  value: "Uscan Service Logger (Dev)",
  url: 'http://mitdev.uhi.amerco/aspnet4/ServiceLogger/'
}, {
  value: "Uscan Service Logger",
  url: 'https://mit.uhi.amerco/secure/aspnet4/ServiceLogger'
}, {
  value: "VIP Look Up",
  url: 'https://uhaul.net/tools/certificate/default.aspx'
}];

$(function() {
  $("input.autocomplete").autocomplete({
    minLength: 1,
    source: function(req, resp) {
      var q = req.term;
      var myResponse = [];
      $.each(mySource, function(key, item) {
        if (item.value.toLowerCase().indexOf(q) === 0) {
          myResponse.push(item);
        }
      });
      resp(myResponse);
    },
    select: function(event, ui) {
     ...