Jquery-ui autocomplete won't work in a specific only <p>Been trying for 2 days and appreciate any help. I can get autocomplete to work outside of the div I am trying to make it work in. The specific div, input field, does not work.</p> <p>I have tried as others mentioned setting the .ui-autocomplete { z-index: 50000 !important; } to the class, but still doesn't work.</p> <p>Here is a link to the test page. The div is "destinations" front and center. <a href="http://www.inidaho.com/responsive/test4.asp" rel="nofollow">http://www.inidaho.com/responsive/test4.asp</a></p> <p>Here is my header code:</p> <pre><code>&lt;link rel="stylesheet" media="screen" href="css/bootstrap-theme.min.css"&gt; &lt;link rel="stylesheet" media="screen" href="css/bootstrap.min.css"&gt; &lt;link rel="stylesheet" media="screen" href="css/glyphicons.css"&gt; &lt;link rel="stylesheet" media="screen" href="css/iitheme.css"&gt; &lt;link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900,100italic,300italic,400italic,500italic,700italic,900italic' rel='stylesheet' type='text/css'&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt;window.jQuery || document.write('&lt;script src="js/vendor/jquery-1.10.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt; &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" /&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;script&gt; $(function() { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran" ]; $("#destination").autocomplete({ source: availableTags }); }); &lt;/script&gt; </code></pre> <p>and here is the input I am trying to autocomplete</p> <pre><code>&lt;form id="home-searchform" class="home-searchform"&gt; &lt;div class="col-lg-8 col-med-5 col-sm-4 col-xs-12 text-center ui-widget"&gt; &lt;label for="destination"&gt;destination&lt;/label&gt; &lt;input id="destination" name="destination" placeholder="Choose Destination"&gt; &lt;/div&gt; &lt;div class="col-lg-4 col-med-3 col-sm-3 col-xs-12"&gt; &lt;input type="button" name="submit" value="GO" class="ui-btn med ui-main txt- center"/&gt; &lt;/div&gt; &lt;/form&gt; </code></pre> <p>I have tried to format the code above correctly, but am having trouble so apologize. Any suggestions are appreciated. Best.</p>