Example

Add the class .autocomplete-dropdown-menu to dropdown-menu to size the Dropdown Menu according to Lexicon Design specifications.

<div className="form-group">
	<label for="autocompleteName1">Name</label>
	<div className="input-group">
		<div className="input-group-item">
			<div className="dropdown">
				<input
					className="form-control"
					id="autocompleteName1"
					type="text"
					value="Rob"
				/>
				<ul className="autocomplete-dropdown-menu dropdown-menu show">
					<li>
						<a className="dropdown-item" href="#1"
							>Rob<strong>ert Downey Jr.</strong></a
						>
					</li>
					<li>
						<a className="dropdown-item" href="#1"
							>Rob<strong>ert Plant</strong></a
						>
					</li>
					<li>
						<a className="dropdown-item" href="#1"
							>Rob<strong>ert Baratheon</strong></a
						>
					</li>
					<li>
						<a className="dropdown-item" href="#1"
							>Rob<strong>ert De Niro</strong></a
						>
					</li>
				</ul>
			</div>
			<div className="form-feedback-group">
				<div className="form-text">
					You can use a comma to enter tags.
					ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.
				</div>
			</div>
		</div>
	</div>
</div>

Search Field

<div className="form-group">
	<label for="autocompleteMarketplace1">Marketplace</label>
	<div className="input-group">
		<div className="input-group-item">
			<div className="dropdown">
				<input
					className="form-control input-group-inset input-group-inset-after"
					id="autocompleteMarketplace1"
					placeholder="Search for..."
					type="text"
					value="ele"
				/>
				<span
					className="input-group-inset-item input-group-inset-item-after"
				>
					<button className="btn btn-unstyled" type="submit">
						<svg
							className="lexicon-icon lexicon-icon-search"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#search" />
						</svg>
					</button>
					<button className="btn btn-unstyled" type="button">
						<svg
							className="lexicon-icon lexicon-icon-times"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#times" />
						</svg>
					</button>
				</span>
				<ul className="autocomplete-dropdown-menu dropdown-menu show">
					<li>
						<a className="dropdown-item" href="#1"
							>ele<strong>ctric toothbrush</strong></a
						>
					</li>
					<li>
						<a className="dropdown-item" href="#1"
							>ele<strong>ctric kettle</strong></a
						>
					</li>
					<li>
						<a className="dropdown-item" href="#1"
							>ele<strong>ctric razor</strong></a
						>
					</li>
					<li>
						<a className="dropdown-item" href="#1"
							>ele<strong>ctrodes for tents</strong></a
						>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

Loading

<div className="form-group">
	<label for="autocompleteMarketplace2">Marketplace</label>
	<div className="input-group">
		<div className="input-group-item">
			<div className="dropdown">
				<input
					className="form-control input-group-inset input-group-inset-after"
					id="autocompleteMarketplace2"
					type="text"
					value="H"
				/>
				<span
					className="input-group-inset-item input-group-inset-item-after"
				>
					<span className="inline-item inline-item-middle">
						<span
							className="loading-animation"
							role="presentation"
						></span>
					</span>
				</span>
				<ul className="autocomplete-dropdown-menu dropdown-menu show">
					<li>
						<span className="disabled dropdown-item"
							>Loading...</span
						>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>