JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Example</title>

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/vadikom/smartmenus/1.1.0/src/css/sm-core-css.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/vadikom/smartmenus/1.1.0/src/css/sm-simple/sm-simple.css">

    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.rawgit.com/vadikom/smartmenus/1.1.0/src/jquery.smartmenus.js"></script>
  </head>

  <body>
    <ul class="sm sm-simple" id="menu">
      <li>
        <a href="#">Search</a>
        <ul class="mega-menu">
          <li>
            <div>Enter a city:<br>
              <!-- problem 1: cannot use <a> here -->
              <a href="#">test link</a>
              <input id="input"><br>
              <input type="button" value="Send">
              <!-- problem 2: z-index of autocomplete menu is too low, so it cannot be seen -->
            </div>
          </li>
        </ul>
      </li>
    </ul>

    <ol>
      <li>Just set the "mega-menu" class to the sub menu containing your custom HTML code (form inputs, links, etc.). This tells the script to neglect any contained lists/links inside the sub menu so they can function like normal links on your page. Then
        add some CSS to reset their styles to the defaults (or whatever you like) since they are normally inheriting styles defined for your menu elements - you can see another mega menus demo here - <a href="https://jsfiddle.net/vadikom/7k3wu7no/?utm_source=website&amp;utm_medium=embed&amp;utm_campaign=7k3wu7no">https://jsfiddle.net/vadikom/7k3wu7no/?utm_source=website&amp;utm_medium=embed&amp;utm_campaign=7k3wu7no</a></li>
      <li>You can always set whatever z-index you like for your menu tree:<br />
        <pre>/* set custom z-index...

CSS

body {
  font: 16px/1.6 sans-serif;
}

/* ====== SmartMenus jQuery ====== */

/* set custom z-index */

#menu {
  z-index: 1;
}

/* reset mega menu list/link styles (which are inherited from the SmartMenus core/theme styles) */

#menu .mega-menu ul {
  position: static;
  display: block;
  margin: 0.83em 0;
  border: 0;
  padding: 0 0 0 20px;
  width: auto;
  background: transparent;
  box-shadow: none;
}

#menu .mega-menu ul li {
  display: list-item;
  list-style-type: disc;
  border: 0;
}

#menu .mega-menu a {
  display: inline;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-decoration: underline;
}

JavaScript

$(function() {
  $('#menu').smartmenus({
    showOnClick: true,
    hideOnClick: true // problem 3: as the autocomplete menu is outside of the sm, a click on it closes the sm, though I want it to stay open
  });
  $('#input').autocomplete({
    source: ['Athens', 'Avarua', 'Baghdad', 'Bangkok', 'Beijing', 'Beirut', 'Berlin', 'Bern']
  });

  // SmartMenus jQuery - do not hide mega menu on autocomplete click/enter
  $(document).on('click', '.ui-autocomplete', function(e) {
    e.stopPropagation();
  });

});