autocomplete (7b57da74) · Commits · github_fork / Clip

fnordmetric-webui/fnordmetric-webui-layout.js

+1 −4

Original line number	Diff line number	Diff line
		@@ -46,11 +46,8 @@ FnordMetric.WebUI = function() {
		searchbar.innerHTML = "<i class='fa fa-search'></i>";
		searchbar.appendChild(searchinput);
		headbar.appendChild(searchbar);
		FnordMetric.util.Autocomplete(searchbar,searchinput, ["foo", "bar"]);

		searchinput.addEventListener('focus', function() {
		console.log("searhc");
		FnordMetric.util.Autocomplete(searchinput, ["foo", "bar"]);
		}, false);
		}

		function init() {

fnordmetric-webui/fnordmetric-webui-util.js

+81 −99

Original line number	Diff line number	Diff line
		@@ -349,118 +349,100 @@ FnordMetric.util.htmlEscape = function(str) {
		return str;
		}

		FnordMetric.util.insertAfter = function(elem, ref_elem) {
		ref_elem.parentNode.insertBefore(elem, ref_elem.nextSibling);
		}



		FnordMetric.util.Autocomplete = function(input, source) {
		console.log("autocomplte");
		var list = document.createElement("ul");
		list.className = "autocomplete";
		source.map(function(item) {
		var li = document.createElement("li");
		li.innerHTML = item;
		list.appendChild(li);
		/* returns all words that includes filter */
		FnordMetric.util.filterStringArray = function(strings, filter) {
		//FIXME ?
		var data = [];
		strings.map(function(string) {
		if (string.indexOf(filter) > -1) {
		data.push(string);
		}
		});

		FnordMetric.util.insertAfter(list, input);

		input.addEventListener('keydown', function(e) {
		console.log("keydown in input");
		console.log(input.value);
		}, false);

		return data;
		}


		/*

		parentNode, dropdown, input_field, keys, search_button) {
		var down = 0;
		var current_value = "";
		var dropdownKeyNav = function() {
		var dropdown_items = dropdown.childNodes;
		var i = down -1;
		if (i < dropdown_items.length) {
		FnordMetric.util.autocompleteKeyNav = function(list_items, i) {
		if (i < list_items.length) {
		if (i > 0) {
		dropdown_items[i - 1].className = "";
		}
		if (i+1 < dropdown_items.length) {
		dropdown_items[i+1].className = "";
		list_items[i - 1].className = "";
		}
		current_value = dropdown_items[i].firstChild.innerHTML;
		dropdown_items[i].className = "hover";
		if (i+1 < list_items.length) {
		list_items[i+1].className = "";
		}
		}

		var destroyDropdown = function() {
		down = 0;
		current_value = "";
		while (dropdown.firstChild) {
		dropdown.removeChild(dropdown.firstChild);
		list_items[i].className = "hover";
		}
		}



		var autocomplete = function(input) {
		destroyDropdown();
		parentNode.appendChild(dropdown);

		keys.map(function(key) {
		if (key.indexOf(input) > - 1) {
		var dropdown_item = document.createElement("li");
		var dropdown_link = FnordMetric.createButton(
		"#", undefined, key);
		dropdown_item.appendChild(dropdown_link);
		dropdown.appendChild(dropdown_item);
		FnordMetric.util.Autocomplete = function(elem, input, source) {
		var position;
		var list = document.createElement("ul");
		var items = source;
		var list_items = [];
		var current_value;
		list.className = "autocomplete";

		dropdown_link.addEventListener('click', function(e) {
		e.preventDefault();
		input_field.value = this.innerHTML;
		destroyDropdown();
		}, false);
		}
		function renderListItems() {
		list_items = [];
		items.map(function(item) {
		var li = document.createElement("li");
		li.innerHTML = item;
		list.appendChild(li);
		list_items.push(li);
		});

		}

		var init = function() {
		input_field.addEventListener('focus', function(e) {
		this.value = "";
		input.addEventListener('focus', function() {
		list.innerHTML = "";
		renderListItems();
		elem.appendChild(list);
		position = -1;
		}, false);

		input.addEventListener('blur', function() {
		elem.removeChild(list);
		}, false);

		input_field.addEventListener('input', function(e) {
		autocomplete(this.value)
		input.addEventListener('input', function() {
		items = FnordMetric.util.filterStringArray(source, input.value);
		list.innerHTML = "";
		renderListItems();
		elem.appendChild(list);
		position = -1;
		}, false);

		input_field.addEventListener('keydown', function(e) {
		input.addEventListener('keydown', function(e) {
		switch (e.keyCode) {
		case 13:
		e.preventDefault();
		input.value = current_value;
		list.innerHTML = "";
		position = -1;
		if (current_value.length > 0){
		input_field.value = current_value;
		} else {
		FnordMetric.WebUI().renderSearchResult(input_field.value);
		console.log("onSubmit");
		}
		destroyDropdown();
		break;
		case 40:
		down++;
		dropdownKeyNav();
		/*
		TODO
		callback function onSubmit
		*/
		break;
		case 38:
		down--;
		dropdownKeyNav();
		position--;
		FnordMetric.util.autocompleteKeyNav(
		list_items, position);
		current_value = items[position];
		break;
		case 40:
		position++;
		FnordMetric.util.autocompleteKeyNav(
		list_items, position);
		current_value = items[position];
		break;
		default:
		break;
		}
		}, false);
		}
		init();
		}

		*/

fnordmetric-webui/fnordmetric-webui.css

+5 −5

Original line number	Diff line number	Diff line
		@@ -586,7 +586,7 @@ input {
		text-align:center
		}

		ul.dropdown {
		ul.autocomplete {
		position: absolute;
		margin-top: 32px;
		width: 208px;
		@@ -594,7 +594,7 @@ ul.dropdown {
		padding-left: 0px;
		}

		ul.dropdown li {
		ul.autocomplete li {
		background-color: #fff;
		border: 1px solid #dbdedf;
		list-style: none;
		@@ -603,7 +603,7 @@ ul.dropdown li {
		border-bottom: 1px solid #dbdedf;
		}

		ul.dropdown li a {
		ul.autocomplete li a {
		line-height:30px;
		display: block;
		padding: 0 4px;
		@@ -611,11 +611,11 @@ ul.dropdown li a {
		color: #444;
		}

		ul.dropdown li.hover {
		ul.autocomplete li.hover {
		background-color: #d7e4f2;
		}

		ul.dropdown li:hover {
		ul.autocomplete li:hover {
		background-color: #d7e4f2;
		}

Admin message