javascript - Jquery UI autocomplete not displaying well on Twitter Bootstrap based website -

so im using bootstrap 3, jquery , jquery-uis autocomplete. on project, result looks this,

but according documentation page, supposed this

with clickable items on mouse on , everything. search box html follows:

<form role="search" class="navbar-form navbar-left">             <div class="form-group">                 <input id="titles" type="text" placeholder="search" class="form-control">             </div>             <button type="submit" class="btn btn-default">go</button>         </form> 

the documentation page jquery-ui autocomplete widget here

any pointers? in advance. ps:the photos taken potato :-)

@dmlittle gave me idea

you need style autocomplete widget boostrap way

.ui-autocomplete { position: absolute; z-index: 1000; cursor: default; padding: 0; margin-top: 2px; list-style: none; background-color: #ffffff; border: 1px solid #ccc -webkit-border-radius: 5px;    -moz-border-radius: 5px;         border-radius: 5px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);  }   .ui-autocomplete > li { padding: 3px 20px;      }    .ui-autocomplete > li.ui-state-focus {   background-color: #ddd;     }  .ui-helper-hidden-accessible {   display: none;  }