Sort Table for Text

by onejdc

HTML

<div id="search">

</div>

<table id="table_1">
<thead>
	<th>Name</th>
	<th>Price</th>
</thead>

<tbody>
	<tr>
		<td>Cat</td>
		<td>3</td>
	</tr>
	<tr>
		<td>Dog</td>
		<td>4</td>
	</tr>
	<tr>
		<td>Cat</td>
		<td>1</td>
	</tr>
	<tr>
		<td>Bird</td>
		<td>8</td>
	</tr>
	<tr>
		<td>Cat</td>
		<td>7</td>
	</tr>
	<tr>
		<td>Dog</td>
		<td>3</td>
	</tr>
	<tr>
		<td>Bird</td>
		<td>1</td>
	</tr>
	<tr>
		<td>Cat</td>
		<td>5</td>
	</tr>
	
</tbody>
</table>

JavaScript

//#savedFilters
ENV_TEST = false

//let x = document.querySelector("td.wizardSpacer")
//x.innerHTML="<input id='filtersSearch'>"

// Test Values
let searchID = "searchbox" // the id attribute name for the input box
let filteredTableContainerSelector = '#table_1' // the context of the DOM element to search
let inputParentSelector = '#search' // the DOM ID to insert the search

// Prod Values
filteredTableContainerSelector = '#savedFilters'
inputParentSelector = 'td.wizardInstruction'

//document.addEventListener("DOMContentLoaded",function() {
// insert 


// prod uses #main-workspace iframe so set parent

// new look
function newLook() {
let iframe = document.querySelector('#main-workspace')
let main = iframe.contentDocument || iframe.contentWindow.document;

let iiframe = main.querySelector("#frameWorkspace")
main = iiframe.contentDocument || iiframe.contentWindow.document;
}
// old look
let oldFrame = document.querySelector("#frameWorkspace")
main = oldFrame.contentDocument || oldFrame.contentWindow.document

// this sits inside filteredTableContainerSelector
let filter_list_iframe = main.querySelector('#filterList')
let fli = filter_list_iframe.contentDocument || filter_list_iframe.contentWindow.document;


if (ENV_TEST) {
	main = document;
}

// create a search element
let searchInput = main.createElement('input')
searchInput.setAttribute('id',searchID)


let boxContainer = main.querySelector(inputParentSelector)
boxContainer.appendChild(searchInput)


//let filteredTableContainer = main.querySelector(filteredTableContainerSelector)
let filteredTableContainers = fli.querySelectorAll('table')



let box = main.querySelector('#' + searchID)

	box.addEventListener("keyup", function(el) {
		/* let d = document.createTextNode(this.value)
		document.body.appendChild(d); */
		
		let tables_array = [...filteredTableContainers]
		tables_array.forEach( table => {
			highlight(table, this.value)
		})
		
	})
//})

function highlight(haystack,needle) {
	const rows =...