garrettsickles · August 30, 2017 03:14
diff --git a/awesomplete_inpage_links.html b/awesomplete_inpage_links.html
 <HTML>
 <HEAD>
 <LINK rel="stylesheet" href="awesomplete.css" />
 </HEAD>
 <BODY>

 <!-- Awesomplete input box -->
 <INPUT id="awesomplete-input" />

 <!-- Searchable item #1 -->
 <DIV id="item-1" class="searchable">
 Item 1 Title Here
 </DIV>

 <!-- Searchable item #2 -->
 <DIV id="item-2" class="searchable">
 Item 2 Title Here
 </DIV>

 <!-- Searchable item #3 -->
 <DIV id="item-3" class="searchable">
 Item 3 Title Here
 </DIV>
 	
 <!-- Awesomplete Initialization -->
 <SCRIPT type="text/javascript">
 	// Get the classes of type "searchable", these will be searchable in the awesomeplete input
 	var items = document.getElementsByClassName("searchable");

 	// Get the Awesomeplete input box
 	var input = document.getElementById("awesomplete-input");
 	
 	// Initialize the searchable list
 	var list = [];

 	// Add the searchable item to a list
 	for (var i=0; i<items.length; i++)
 	{
 		// Inner Text is the display name, ID is the indexed name
 		list[i] = [items[i].innerText.toString(), items[i].id.toString()];
 	}
 	
 	// Setup empty awesomeplete
 	var awesomplete = new Awesomplete(input);
 	
 	// Set the list to the searchables
 	awesomplete.list = list;
 	
 	// Show availiable items after 1 character is entered
 	awesomplete.minChars = 1;
 	
 	// When an item is selected, scroll to it and reset the awesomeplete input
 	Awesomplete.$.bind(input, {
 		"awesomplete-selectcomplete": function(evt) {
 			document.getElementById(evt.text.value).scrollIntoView();
 			awesomplete.close();
 			input.value = "";
 		}
 	});
 </SCRIPT>

 <SCRIPT src="awesomplete.min.js"></SCRIPT>
 </BODY>
 </HTML>
	<HTML>
	<HEAD>
	<LINK rel="stylesheet" href="awesomplete.css" />
	</HEAD>
	<BODY>

	<!-- Awesomplete input box -->
	<INPUT id="awesomplete-input" />

	<!-- Searchable item #1 -->
	<DIV id="item-1" class="searchable">
	Item 1 Title Here
	</DIV>

	<!-- Searchable item #2 -->
	<DIV id="item-2" class="searchable">
	Item 2 Title Here
	</DIV>

	<!-- Searchable item #3 -->
	<DIV id="item-3" class="searchable">
	Item 3 Title Here
	</DIV>

	<!-- Awesomplete Initialization -->
	<SCRIPT type="text/javascript">
	// Get the classes of type "searchable", these will be searchable in the awesomeplete input
	var items = document.getElementsByClassName("searchable");

	// Get the Awesomeplete input box
	var input = document.getElementById("awesomplete-input");

	// Initialize the searchable list
	var list = [];

	// Add the searchable item to a list
	for (var i=0; i<items.length; i++)
	{
	// Inner Text is the display name, ID is the indexed name
	list[i] = [items[i].innerText.toString(), items[i].id.toString()];
	}

	// Setup empty awesomeplete
	var awesomplete = new Awesomplete(input);

	// Set the list to the searchables
	awesomplete.list = list;

	// Show availiable items after 1 character is entered
	awesomplete.minChars = 1;

	// When an item is selected, scroll to it and reset the awesomeplete input
	Awesomplete.$.bind(input, {
	"awesomplete-selectcomplete": function(evt) {
	document.getElementById(evt.text.value).scrollIntoView();
	awesomplete.close();
	input.value = "";
	}
	});
	</SCRIPT>

	<SCRIPT src="awesomplete.min.js"></SCRIPT>
	</BODY>
	</HTML>