Spent hours trying to get this to work to no avail.

[doug-ross]

Guys, this thing is very, very difficult to use. I have an extremley simple search box and can't get any of the list positioning to work in the most bootstrap environment.

I've spent hours fiddling with HTML and CSS and have basically given up. There should be a very simple example (the demo is useless) of the sort that jqueryui uses, stripped down and basic.

`

Search:

</div>

`

` .searchlabel { height: 1.8em; font-size: 1.8em; }

.searchbox { height: 1.8em; width: 24em; font-size: 1.8em; }

.searchbutton { height: 1.8em; font-size: 1.8em; }

.searchwrapper { width: 48% !important; position: absolute; border: 1px dashed black; }

.autocompleter { background: #dddddd; position: absolute; width: 43em !important; top: 0; z-index: 100; border: 1px solid gray; }

.autocompleter-list { width: 100% !important; box-shadow: inset 0px 0px 6px rgba(0,0,0,0.1); list-style: none; margin: 0; padding: 0; text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box; }

.autocompleter-item-selected { background: #ffffff; }

.autocompleter-item { padding: 6px 12px; color: #444444; font-size: 20px; cursor: pointer; }

.autocompleter-item:hover { background: #dbed8a; }

.autocompleter-item strong { background: #f9de8f; text-shadow: 0 1px 0 #ffffff; }

.autocompleter-item span { color: #bbbbbb; }

.autocompleter-hint { color: #ccc; text-align: left; top: -56px; font-weight: 400; left: 0; width: 100%; padding: 12px 12px 12px 13px; font-size: 24px; display: none; }

.autocompleter-hint span { color: transparent; }

.autocompleter-hint-show { display: block; }

.autocompleter-closed { display: none; } `

[fitiskin]

Forgive me for abandoning the project and answering you a few years later.

I've prepared an example: https://codesandbox.io/s/jquery-autocompleter-bootstrap-4-died3v CSS must be placed after defaults.

HTML

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="mt-4">
        <h1>jquery-autocompleter</h1>
        <p class="lead">Stripped down and basic Bootstrap 4 example</p>
        <form id="form">
          <div class="form-group">
            <label for="color">Color</label>
            <input
              type="text"
              class="form-control"
              id="color"
              placeholder="Enter color"
              aria-describedby="colorHelp"
            />
            <small id="colorHelp" class="form-text text-muted"
              >We'll never share your color with anyone else.</small
            >
          </div>
          <div class="btn-group" role="group">
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="clear" class="btn btn-light">Clear</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

JavaScript

$(function () {
  $("#color").autocompleter({
    source: data,
    customLabel: "name",
    customClass: ["custom"]
  });
});

CSS

.custom {
  z-index: 1;
  width: auto;
  box-sizing: border-box;
}

.custom .autocompleter-list {
  padding: 0.5rem 0;
  box-sizing: border-box;
  font-size: 1rem;
  color: #212529;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0.25rem;
}

.custom .autocompleter-item {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: #212529;
  text-align: inherit;
  white-space: nowrap;
  border: 0;
}

.custom .autocompleter-item:hover,
.custom .autocompleter-item-selected {
  color: #16181b;
  background-color: #f8f9fa;
}