Bootstrap styling for jQuery UI autocomplete

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 > 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, &.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;
    }
  }
}

Thanks!!

thanks. it looks great.

+1 @nanakoe

Thank you for sharing this

Thanks for sharing! Works great!!

I'm still using Bootstrap 2 but now with Rails 4.2.1, jQuery-UI 1.11.4, and rails-jquery-autocomplete 1.0.0, not rails3-jquery-autocomplete. The menu items are no longer wrapped in "a" tags, and the active item gets a ui-state-focus class. Seems to be working correctly under Firefox after changing the last two blocks as follows:

.ui-menu-item {
  display: block;
  padding: 3px 15px;
  clear: both;
  font-weight: normal;
  line-height: 18px;
  color: #555555;
  white-space: nowrap;

  &.ui-state-focus {
    color: #ffffff;
    text-decoration: none;
    background-color: #0088cc;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-image: none;
  }
}

I am getting 'The entity name must immediately follow the '&' in the entity reference.' error.

Works beautifully ... Thank you sir

Did not work for me, sallipa solution neither.
.ui-state-focus was missing.
Working style: https://gist.github.com/paseto/5b0f626bbf4ccdcc0b09

@paseto I can't get yours to work for me either. Still stuck on the default css except for the width seemed to have worked. Otherwise everything is the ugly default css. CSS is so confusing sometimes.

Thanks a lot

👍 thanks for this

Thanks! Helped a lot.

For me selection is not working ! any help ?

Thanks @mcbsys. Your patch works fine.
Bootstrap3 + rails-jquery-autocomplete + Rails 4.2

This is good. Saved me allot of work; however, I needed to bump .ui-autocomplete Z-index way up to get the drop down to show.

@mcbsys you style correction works with Bootstrap3 + rails-jquery-autocomplete + Rails 4.2 too

Thanks to all!

+1 @mcbsys

thanks!!!!!!!

Thanks! for the last two blocks in .ui-autocomplete, here is my modification which works in my local Chrome

.ui-menu-item {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;

    .ui-state-active, .ui-state-hover {
      color: #ffffff;
      text-decoration: none;
      background-color: #0088cc;
      border-radius: 0;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      background-image: none;
    }

  }

@yrxwin, your modification to the original is looking good here, thanks!

Thank you!

Thanks !!! 👍

Minimal, out-of-the-box that mimics the drop-down styling while using Less...

.ui-autocomplete {
	.dropdown-menu;
}
.ui-state-hover,
.ui-state-active,
.ui-state-focus {
	a {
		text-decoration: none;
		color: @dropdown-link-hover-color;
		background-color: @dropdown-link-hover-bg;
		cursor: pointer;
	}
}

Thanks!

This kind of works on my project. The selected item it get draw outside of the box and once the selection is made the string
stays on the screen. (rails 4.2.6, botstrap, simple_form)
Any suggestions ?

None of these seem to work as intended with the newest version of jquery-ui (1.12.1). They work with 1.11.4 though. If you're using rails, you can see how your gem matches up with the jquery-ui version here: https://github.com/jquery-ui-rails/jquery-ui-rails/blob/master/VERSIONS.md

@em77 is right

Now this combination of selectors works (for me at least):

  .ui-menu-item-wrapper {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;

    &:hover, &.ui-state-focus, &.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;
    }
  }

On:

gem 'jquery-rails', '4.3.1'
gem 'jquery-ui-rails', '5.0.5' # which installs jquery-ui 1.11.4

The following worked for me perfectly:

.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 {
    display: block;
    padding: 3px 15px;
    clear: both;
    font-weight: normal;
    line-height: 18px;
    color: #555555;
    white-space: nowrap;

    &.ui-state-focus, &.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;
    }
  }
}

.ui-helper-hidden-accessible { display:none; } //Hide that pesky bottom message

@bbonamin That is beautiful. Makes everything look soo much better! Thank you.

Thanks !!!!