Style jQuery autocomplete in a Bootstrap input field

Question

I have implemented a jQuery autocomplete function to a Bootstrap input  The jQuery autocomplete is working fine but I want to see the results as a combo and I guess it s now happening because I m using BootStrap   This is the field that I m assigning autocomplete    lt div class  form-group  gt     lt label gt Employee lt  label gt     lt input class  form-control  name  txtEmployee  placeholder  Trabajador  gt   lt  div gt      this  autocomplete      source  function request  response          ajax         url    Url Content    Employee SearchEmployee            type   POST         contentType   application json         dataType   json         data  JSON stringify             employerId  1            searchStr  me val                   success  function data            if  data success               response   map data data  function item                 return                 label        item EmployeeNumber                                      item FirstName                                     item MothersLast                                      item FathersLast                employeeId  item EmployeeId                                                                minLength  3       The results are displayed but like this     How can I style the results with Bootstrap so I can see them like dropdownlist

User · Answer

I don t know if you fixed it  but I did had the same issue  finally it was a dumb thing  I had    lt script src  jquery-ui jquery-ui min css  rel  stylesheet  gt    but it should be    lt link href  jquery-ui jquery-ui min css  rel  stylesheet  gt    Just change  lt scrip gt  to  lt link gt  and src to href

User · Answer

If you re using jQuery-UI  you must include the jQuery UI CSS package  otherwise the UI components don t know how to be styled     If you don t like the jQuery UI styles  then you ll have to recreate all the styles it would have otherwise applied   Here s an example and some possible fixes   Minimal  Complete  and Verifiable example  i e  broken   Here s a demo in Stack Snippets without jquery-ui css  doesn t work    x000D   x000D    function     x000D    var availableTags     x000D       ActionScript    AppleScript    Asp    BASIC    C    C     x000D       Clojure    COBOL    ColdFusion    Erlang    Fortran   x000D       Groovy    Haskell    Java    JavaScript    Lisp    Perl   x000D       PHP    Python    Ruby    Scala    Scheme  x000D       x000D     x000D        autocomplete   autocomplete   x000D      source  availableTags x000D        x000D      x000D   lt link href    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 css bootstrap css  rel  stylesheet   gt  x000D   x000D   lt script src    cdnjs cloudflare com ajax libs jquery 2 1 3 jquery js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs jqueryui 1 11 2 jquery-ui js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 js bootstrap js  gt  lt  script gt  x000D   x000D   lt div class  container  gt  x000D   x000D     lt div class  form-group  gt  x000D       lt label gt Languages lt  label gt  x000D       lt input class  form-control autocomplete  placeholder  Enter A    gt  x000D     lt  div gt  x000D     x000D     lt div class  form-group  gt  x000D       lt label  gt Another Field lt  label gt  x000D       lt input class  form-control  gt  x000D     lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D    Fix  1 - jQuery-UI Style  Just include jquery-ui css and everything should work just fine with the latest supported versions of jquery    x000D   x000D    function     x000D    var availableTags     x000D       ActionScript    AppleScript    Asp    BASIC    C    C     x000D       Clojure    COBOL    ColdFusion    Erlang    Fortran   x000D       Groovy    Haskell    Java    JavaScript    Lisp    Perl   x000D       PHP    Python    Ruby    Scala    Scheme  x000D       x000D     x000D        autocomplete   autocomplete   x000D      source  availableTags x000D        x000D      x000D   lt link href    cdnjs cloudflare com ajax libs jqueryui 1 11 2 jquery-ui css  rel  stylesheet   gt  x000D   lt link href    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 css bootstrap css  rel  stylesheet   gt  x000D   x000D   lt script src    cdnjs cloudflare com ajax libs jquery 2 1 3 jquery js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs jqueryui 1 11 2 jquery-ui js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 js bootstrap js  gt  lt  script gt  x000D   x000D   lt div class  container  gt  x000D     lt div class  form-group  gt  x000D       lt label gt Languages lt  label gt  x000D       lt input class  form-control autocomplete  placeholder  Enter A    gt  x000D     lt  div gt  x000D     x000D     lt div class  form-group  gt  x000D       lt label  gt Another Field lt  label gt  x000D       lt input class  form-control  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Fix  2 - Bootstrap Theme  There is a project that created a Bootstrap-esque theme for jQuery-UI components called jquery-ui-bootstrap   Just grab the stylesheet from there and you should be all set    x000D   x000D    function     x000D    var availableTags     x000D       ActionScript    AppleScript    Asp    BASIC    C    C     x000D       Clojure    COBOL    ColdFusion    Erlang    Fortran   x000D       Groovy    Haskell    Java    JavaScript    Lisp    Perl   x000D       PHP    Python    Ruby    Scala    Scheme  x000D       x000D     x000D        autocomplete   autocomplete   x000D      source  availableTags x000D        x000D      x000D   lt link href  https   cdnjs cloudflare com ajax libs jquery-ui-bootstrap 0 5pre css custom-theme jquery-ui-1 10 0 custom css  rel  stylesheet   gt  x000D   lt link href    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 css bootstrap css  rel  stylesheet   gt  x000D   x000D   lt script src    cdnjs cloudflare com ajax libs jquery 2 1 3 jquery js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs jqueryui 1 11 2 jquery-ui js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 js bootstrap js  gt  lt  script gt  x000D   x000D   lt div class  container  gt  x000D     lt div class  form-group  gt  x000D       lt label gt Languages lt  label gt  x000D       lt input class  form-control autocomplete  placeholder  Enter A    gt  x000D     lt  div gt  x000D     x000D     lt div class  form-group  gt  x000D       lt label  gt Another Field lt  label gt  x000D       lt input class  form-control  gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Fix  3 - Manual CSS  If you only need the AutoComplete widget from jQuery-UI s library  you should start by doing a custom build so you don t pull in resources you re not using     After that  you ll need to style it yourself  Just look at some of the other styles that are applied to jquery s autocomplete css and theme css to figure out what styles you ll need to manually replace   You can use bootstrap s dropdowns less for inspiration     Here s a sample CSS that fits pretty well with Bootstrap s default theme    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  gt  li     padding  3px 20px     ui-autocomplete  gt  li ui-state-focus     background-color   DDD     ui-helper-hidden-accessible     display  none       x000D   x000D    function     x000D    var availableTags     x000D       ActionScript    AppleScript    Asp    BASIC    C    C     x000D       Clojure    COBOL    ColdFusion    Erlang    Fortran   x000D       Groovy    Haskell    Java    JavaScript    Lisp    Perl   x000D       PHP    Python    Ruby    Scala    Scheme  x000D       x000D     x000D        autocomplete   autocomplete   x000D      source  availableTags x000D        x000D      x000D   ui-autocomplete   x000D      position  absolute  x000D      z-index  1000  x000D      cursor  default  x000D      padding  0  x000D      margin-top  2px  x000D      list-style  none  x000D      background-color   ffffff  x000D      border  1px solid  ccc x000D      -webkit-border-radius  5px  x000D         -moz-border-radius  5px  x000D              border-radius  5px  x000D      -webkit-box-shadow  0 5px 10px rgba 0  0  0  0 2   x000D         -moz-box-shadow  0 5px 10px rgba 0  0  0  0 2   x000D              box-shadow  0 5px 10px rgba 0  0  0  0 2   x000D    x000D   ui-autocomplete  gt  li   x000D    padding  3px 20px  x000D    x000D   ui-autocomplete  gt  li ui-state-focus   x000D    background-color   DDD  x000D    x000D   ui-helper-hidden-accessible   x000D    display  none  x000D    x000D   lt link href    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 css bootstrap css  rel  stylesheet   gt  x000D   x000D   lt script src    cdnjs cloudflare com ajax libs jquery 2 1 3 jquery js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs jqueryui 1 11 2 jquery-ui js  gt  lt  script gt  x000D   lt script src    cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 2 js bootstrap js  gt  lt  script gt  x000D   x000D   lt div class  container  gt  x000D     lt div class  form-group ui-widget  gt  x000D       lt label gt Languages lt  label gt  x000D       lt input class  form-control autocomplete  placeholder  Enter A    gt  x000D     lt  div gt  x000D     x000D     lt div class  form-group ui-widget  gt  x000D       lt label  gt Another Field lt  label gt  x000D       lt input class  form-control    gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D       Tip  Since the dropdown menu hides every time you go to inspect the element  i e  whenever the input loses focus   for easier debugging of the style  find the control with  ui-autocomplete and remove display  none

User · Answer

The gap between the  bootstrap  input field and jquery-ui autocompleter seem to occur only in jQuery versions    3 2  When using jQuery version 3 1 1 it seem to not happen   Possible reason is the notable update in v3 2 0 related to a bug fix on  width   and  height    Check out the jQuery release notes for further details  v3 2 0   v3 1 1  Bootstrap version 3 4 1 and jquery-ui version 1 12 0 used

User · Answer

Try this  demo     ui-autocomplete     position  absolute    top  100     left  0    z-index  1000    display  none    float  left    min-width  160px    padding  5px 0    margin  2px 0 0    list-style  none    font-size  14px    text-align  left    background-color   ffffff    border  1px solid  cccccc    border  1px solid rgba 0  0  0  0 15     border-radius  4px    -webkit-box-shadow  0 6px 12px rgba 0  0  0  0 175     box-shadow  0 6px 12px rgba 0  0  0  0 175     background-clip  padding-box      ui-autocomplete  gt  li  gt  div     display  block    padding  3px 20px    clear  both    font-weight  normal    line-height  1 42857143    color   333333    white-space  nowrap      ui-state-hover   ui-state-active   ui-state-focus     text-decoration  none    color   262626    background-color   f5f5f5    cursor  pointer      ui-helper-hidden-accessible     border  0    clip  rect 0 0 0 0     height  1px    margin  -1px    overflow  hidden    padding  0    position  absolute    width  1px

User · Answer

I found the following css in order to style a Bootstrap input for a jquery autocomplete   https   gist github com daz 2168334 file-style-scss   ui-autocomplete       position  absolute      top  100       left  0      z-index  1000      float  left      display  none      min-width  160px       width  160px      padding  4px 0      margin  2px 0 0 0      list-style  none      background-color   ffffff      border-color   ccc      border-color  rgba 0  0  0  0 2       border-style  solid      border-width  1px      -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       -webkit-background-clip  padding-box      -moz-background-clip  padding      background-clip  padding-box       border-right-width  2px       border-bottom-width  2px     ui-menu-item  gt  a ui-corner-all       display  block      padding  3px 15px      clear  both      font-weight  normal      line-height  18px      color   555555      white-space  nowrap     ui-state-hover   amp  ui-state-active         color   ffffff        text-decoration  none        background-color   0088cc        border-radius  0px        -webkit-border-radius  0px        -moz-border-radius  0px        background-image  none

[jquery] Style jQuery autocomplete in a Bootstrap input field

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to jquery-autocomplete