Working with DataTables for the first time I was having some issues with the UI. The search textbox was not allowing the user the backspace. They were able to select the text and use the delete key to clear it out, but it almost felt like there was a script capturing and suppressing the backspace key press. Upon closer inspection the “type” of the input was “Search”. According to w3schools (and Visual Studio’s Intellisense) this was valid HTML. The example of their site worked as well. Perhaps it had something to do with the other scripts running on the page, or possibly the Bootstrap library addon for DataTables? Changing the type to “Text” fixed the issue. I found an easy workaround here until I can fix the root of the problem.
Category Archives: Bootstrap
Bootstrap Dropdown Selection
Unlike most dropdown controls in use across the web today, Bootstrap dropdowns don’t natively support selecting items in the list by typing the item you want to select out on your keyboard. On regular dropdowns, if your list has 2 items in it:
<label class="control-label">New / Used:</label>
<div class="dropdown">
<button id="buttonSearchVehicleNewUsed" class="btn dropdown-toggle " type="button" data-toggle="dropdown">-- Select Type --</button>
<ul id="dropDownSearchVehicleNewUsed" class="dropdown-menu" role="menu">
<li data-val="true"><a href="#">New</a></li>
<li data-val="false"><a href="#">Used</a></li>
<li data-val="false"><a href="#">UsedCPO</a></li>
</ul>
</div>
</div>
and you open the dropdown, you can normally only use the up and down arrows to select your item. If you modify your list to have dozens or hundreds of items, this can take a significant amount of time.
This plugin allows you to open the dropdown and type “U” to have the first item starting with the letter “U” to become focused. Additional typing will allow a more refined search “USEDC” would jump to the “UsedCPO”. This allows users to quickly get to the item they want. The project is on my GitHub: https://github.com/mlapaglia/Bootstrap-DropdownSelect