title: Jquery-ui Autocomplete and Bootstrap 3 fixed navbar
body: <p>I am trying to make a autocomplete search using jquery ui and twitter bootstarp. I have added a facny search box to the nav bar and everything seems to be working fine. Please take a look on <strong>code snippet below</strong> or you can also see the same code here on this <a href="http://jsfiddle.net/aadi1295/d303mnu8/13/" rel="nofollow noreferrer"><strong>JSFiddle</strong></a>, just type 'a' and it will automatically show results in a dropdown list.</p>
  
  <p>Problem is with tablet and mobile version's navbar of bootstrap, for example below code snippet showing tablet version by default, so bootstarp navbar adjust its height, but when I search on tablet or mobile versions, autocomplete results stay behind the navbar which is fixed position. I have tried to fix this issue with z-index and by changing <code>.ui-autocomplete {position:relative;}</code>, but nothing is working for me. below is the image of this issue.</p>
  
  <p><img src="https://i.stack.imgur.com/lLiGU.png" alt="enter image description here"></p>
  
  <p><strong>Please take a look on below code snippet, Thanks</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
          // Remove Search if user Resets Form or hits Escape!
    $('body, .navbar-collapse form[role="search"] button[type="reset"]').on('click keyup', function(event) {
     console.log(event.currentTarget);
     if (event.which == 27 &amp;&amp; $('.navbar-collapse form[role="search"]').hasClass('active') ||
      $(event.currentTarget).attr('type') == 'reset') {
      closeSearch();
     }
    });
  
    function closeSearch() {
              var $form = $('.navbar-collapse form[role="search"].active')
        $form.find('input').val('');
     $form.removeClass('active');
    }
  
    // Show Search if form is not active // event.preventDefault() is important, this prevents the form from submitting
    $(document).on('click', '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(event) {
     event.preventDefault();
     var $form = $(this).closest('form'),
      $input = $form.find('input');
     $form.addClass('active');
     $input.focus();
  
    });
      });
  
  $(function() {
      var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
      ];
      $( "#search" ).autocomplete({
        source: availableTags
      });
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 60px 0px;
   }
   .navbar-collapse {
    position: relative;
    padding-top: 30px !important;
    max-height: 270px;
   }
   .navbar-collapse form[role="search"] {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    padding: 0px;
    margin: 0px;
    z-index: 0;
   }
   .navbar-collapse form[role="search"] button,
   .navbar-collapse form[role="search"] input {
    padding: 8px 12px;
    border-radius: 0px;
    border-width: 0px;
    color: rgb(119, 119, 119);
    background-color: rgb(248, 248, 248);
    border-color: rgb(231, 231, 231);
    box-shadow: none;
    outline: none;
   }
   .navbar-collapse form[role="search"] input {
    padding: 16px 12px;
    font-size: 14pt;
    font-style: italic;
    color: rgb(160, 160, 160);
    box-shadow: none;
   }
   .navbar-collapse form[role="search"] button[type="reset"] {
    display: none;
   }
  
   @media (min-width: 768px) {
    .navbar-collapse {
     padding-top: 0px !important;
     padding-right: 38px !important;
    }
    .navbar-collapse form[role="search"] {
     width: 38px;
    }
    .navbar-collapse form[role="search"] button,
    .navbar-collapse form[role="search"] input {
     padding: 15px 12px;
    }
    .navbar-collapse form[role="search"] input {
     font-size: 18pt;
     opacity: 0;
     display: none;            
              height: 50px;
    }
    .navbar-collapse form[role="search"].active {
     width: 100%;
    }
    .navbar-collapse form[role="search"].active button,
    .navbar-collapse form[role="search"].active input {
     display: table-cell;
     opacity: 1;
    }
       .navbar-collapse form[role="search"].active input {
     width: 100%;
    }
   }
  
  .ui-autocomplete {
              z-index:1000;
              max-height: 500px;
              overflow-y: auto;
              overflow-x: hidden;
              position: relative;
              width:500px;
          }
          * html .ui-autocomplete {
              height: 500px;
               z-index:1000;
               width:500px;
          }
          .hide {
              display: none;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/&gt;
  &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;a class="navbar-brand" href="#"&gt;Example logo&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse" id="navbar-collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="active"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Drop Down&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu" role="menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="divider"&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;form class="navbar-form" role="search"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;input type="text" id="search" class="form-control" placeholder="Search"&gt;
                          &lt;span class="input-group-btn"&gt;
                              &lt;button type="reset" class="btn btn-default"&gt;
                                  &lt;span class="glyphicon glyphicon-remove"&gt;
                                      &lt;span class="sr-only"&gt;Close&lt;/span&gt;
                                  &lt;/span&gt;
                              &lt;/button&gt;
                              &lt;button type="submit" class="btn btn-default"&gt;
                                  &lt;span class="glyphicon glyphicon-search"&gt;
                                      &lt;span class="sr-only"&gt;Search&lt;/span&gt;
                                  &lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please help me fixing this issue.</p>