Auto-Complete with tokens and Categories

by Jason Normandin

HTML

<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<H1>Begin typing in the search box to begin your query</h1>
<br><br><br><br>


<select data-placeholder="What are you looking for?" multiple class="chosen-select" tabindex="16">

	<option value=""></option>

	<optgroup label="Devices">
		<option>Devices</option>
		<option>Devices in Group</option>
		<option>Devices in Locations</option>
		<option>Devices in IP Range</option>
		<option>Devices by Vendor</option>
	</optgroup>

	<optgroup label="Routers">
		<option>Routers</option>
		<option>Routers in Group</option>
		<option>Routers in Location</option>
		<option>Routers in IP Range</option>
		<option>Routers by Vendor</option>
	</optgroup>

	<optgroup label="Switches">
		<option>Switches</option>
		<option>Switches in Group X</option>
		<option>Switches in Location></option>
		<option>Switches in IP Range></option>
		<option>Switches by Venodr></option>
	</optgroup>

	<optgroup label="Components">
		<option>Components</option>
		<option>Components of Type</option>
		<option>Components in Device</option> 
		<option>Components in Group</option> 
	</optgroup>	

	<optgroup label="Sort">
		<option>Sort by Column Asc</option>
		<option>Sort by Column Desc</option>
	</optgroup>

	<optgroup label="Filer">
		<option>ends with</option>
		<option>indexof</option>
		<option>replace</option>
		<option>startswith</option>
		<option>tolower</option>
		<option>toupper</option>
		<option>trim</option>
		<option>substring</option>
		<option>substringof</option>
		<option>concat</option>
		<option>length</option>
	</optgroup>

	<optgroup label="Operators">
		<option>not</option>
		<option>and</option>
		<option>or</option>
		<option>less than</option>
		<option>greater than</option>
		<option>less than or equal</option>
		<option>greater than or equal</option>
		<option>equals</option>
		<option>not...

CSS

#selectedlist { border: solid 1px #eee; margin-top:20px; padding:10px}

JavaScript

var config = {
    
      '.chosen-select'     : {width:"75%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    
        
document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";