File size: 3.31Kb
<!DOCTYPE html>
<html lang="en">
<head><title>Sample Markup</title></head>
<body>
<div id="MyComboboxContainer">
<div class="form-group">
<label class="col-sm-2 control-label" for="MyComboBoxWithSelectedInput">Has selected item</label>
<div class="col-sm-10">
<div id="MyComboboxWithSelected" class="input-group input-append dropdown combobox">
<input id="MyComboBoxWithSelectedInput" type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-hidden="true" role="menu">
<li data-value="1"><a href="#">One</a></li>
<li data-value="2"><a href="#">Two</a></li>
<li data-value="3" data-selected="true"><a href="#">Three</a></li>
<li data-value="4" ><a href="#">Four</a></li>
<li data-value="Item Five"><a href="#">Item Five</a></li>
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="MyComboboxSingleItem" class="input-group input-append dropdown combobox">
<input id="MyComboBoxInput1" type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-hidden="true" role="menu">
</ul>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="MyComboBoxInput2">No selected item</label>
<div class="col-sm-10">
<div id="MyCombobox" class="input-group input-append dropdown combobox">
<input id="MyComboBoxInput2" type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-hidden="true" role="menu">
<li data-value="1"><a href="#">One</a></li>
<li data-value="2"><a href="#">Two</a></li>
<li data-value="3"><a href="#">Three</a></li>
<li data-value="4" ><a href="#">Four</a></li>
<li data-value="Item Five"><a href="#">Item Five</a></li>
<li data-value="6" data-foo="bar" data-fizz="buzz"><a href="#">Six</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="MyComboBoxWSInput1">No selected item</label>
<div class="col-sm-10">
<div id="MyComboboxWithWhiteSpace" class="input-group input-append dropdown combobox">
<input id="MyComboBoxWSInput1" type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-hidden="true" role="menu">
<li>
<a href="#">
no whitespace
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>