css - JQuery Ui 1.9.2: No navigation with autocomplete. Can't see the bug. Help Please? -

i trying add autocomplete search bar. works navigation kinda "hidden" see:

see navigation "tab" hidden. checked style.css , added reset css code:

style.css

    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {     margin:0;     padding:0;     border:0;     outline:0;     font-size:100%;     vertical-align:baseline;     background:transparent; } * { all: unset }  body {     line-height:1; }  article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {      display:block; }  nav ul {     list-style:none; }  blockquote, q {     quotes:none; }  blockquote:before, blockquote:after, q:before, q:after {     content:'';     content:none; }  {     margin:0;     padding:0;     font-size:100%;     vertical-align:baseline;     background:transparent; }  /* change colours suit needs */ ins {     background-color:#ff9;     color:#000;     text-decoration:none; }  /* change colours suit needs */ mark {     background-color:#ff9;     color:#000;      font-style:italic;     font-weight:bold; }  del {     text-decoration: line-through; }  abbr[title], dfn[title] {     border-bottom:1px dotted;     cursor:help; }  table {     border-collapse:collapse;     border-spacing:0; }  /* change border colour suit needs */ hr {     display:block;     height:1px;     border:0;        border-top:1px solid #cccccc;     margin:1em 0;     padding:0; }  input, select {     vertical-align:middle; }  /*                          - - - - -  - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ html {   font-family: sans-serif;   -webkit-text-size-adjust: 100%;       -ms-text-size-adjust: 100%; } body {   margin: 0; }     .form-wrapper {       position: absolute;         width: 450px;         padding: 15px;         margin: 230px auto 80px 396px;      }      .form-wrapper input {         width: 400px;         height: 40px;         padding: 10px 5px;         float: left;         font: bold 20px 'arial', 'trebuchet ms', 'tahoma';         border: 2;          -moz-border-radius: 3px 0 0 3px;         -webkit-border-radius: 3px 0 0 3px;         border-radius: 9px;     }      .form-wrapper input:focus {         outline: 0;         background: #fff;         -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;         -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;         box-shadow: 0 0 1px rgba(0,0,0,.8) inset;     }      .form-wrapper input::-webkit-input-placeholder {        color: #999;        font-weight: normal;        font-style: italic;     }      .form-wrapper input:-moz-placeholder {         color: #999;         font-weight: normal;         font-style: italic;     }      .form-wrapper input:-ms-input-placeholder {         color: #999;         font-weight: normal;         font-style: italic;     }    /*  - - - - - - - - - - - - - -  - - - - - - -  - - */  h3{ /* results %% */     position: absolute;     margin: 330px auto auto 550px;     font-family: "din condensed", arial;     font-size: 30px;  }  .comment {     margin: 380px 310px -350px 350px;  }  {     text-decoration: none;     color: #005ca9; }    .link{      font-size: 25px;     font-family:  "avenir next", "helvetica neue", arial;     text-decoration: none;     color: black;     padding-top: 3px;     padding-bottom: 2px;     padding-left: 8px;     padding-right: 8px;  }  .link:hover{      text-decoration: none; }  img {     position: absolute;     margin: 90px auto auto 340px;     background-repeat : no-repeat; }  .nothing{   font-size: 24px;   position: absolute;   margin: 430px auto auto 466px; }  .maybe{   font-size: 24px;   position: absolute;   margin: 430px auto auto 376px; }  .autocomplete{   text-decoration: none;    color: black;   font-size: 20px; } 

i checked chrome dev tools , found interesting. in fact, when clicked, tab width higly increased, see:

don't know do, jsfiddle show no errors app (http://jsfiddle.net/6yxxw/). i'm new jquery ui, can me?

i forgot share html file form , js(django app):

search.html:

<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" > <img src="{% static "monky.png" %}" alt="monky" galleryimg="no"/> <form method="get" action="." class="form-wrapper cf">              {% field in form %}         <div class="fieldwrapper">              {{ field}}         </div>              {% endfor %} </form>  <script type="text/javascript"> function monkeypatchautocomplete() {      var oldfn = $.ui.autocomplete.prototype._renderitem;      $.ui.autocomplete.prototype._renderitem = function (ul, item) {         var re = new regexp("^" + this.term, "i");         var t = item.label.replace(re, "<span style='font-weight:bold;color:black;'>" + this.term + "</span>");         return $("<p></p>")             .data("item.autocomplete", item)             .append("<a class='autocomplete'>" + t + "</a>")             .appendto(ul);     }; }  $(function () {      monkeypatchautocomplete();      var availabletags = [         "comédie",         "horreur",         "coloré",         "corala"];      $("#search_bar").autocomplete({         source: availabletags     }); }); 

try moving bootstrap <style> tag bottom of <style>'s loads last.

or try overriding css like:

.ui-autocomplete { border: 1px solid #aaaaaa!important; width:250px!important; } .ui-state-focus { border: 1px solid #999999!important; background: #dadada!important; font-weight:normal!important; color: #212121;!important }