dayvonjersen/index.html

## index.html
<!doctype html>
<html>
	<head>
        <meta charset='utf-8'>
		<title>Index</title>
	</head>
	<body>
	    <input type="text" placeholder="gtype suggest">
        <ul></ul>

        <script src="model.js"></script>
        <script>
var controller = new SearchController();
SearchModel.register(SearchView);
        </script>
	</body>
</html>

## model.js
function Subject() {
    var observers = [];

    return {
        add: function(item) {
            observers.push(item);
        },
        removeAll: function() {
            observers = [];
        },
        notifyObservers: function() {
            observers.forEach((o) => o.notify());
        }
    }
};

var SearchModel = {
    subject: new Subject(),

    query: "",
    results: [],
    /* advanced: filters, sort, etc... */

    search: function(query) {
        query = encodeURIComponent(query);
        /* check length, set additional parameters... */
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "http://localhost/search?json&q="+query);
        xhr.onreadystatechange = () => {
            if(xhr.readyState == 4 && xhr.status == 200) {
                this.query = query;
                this.results = [];
                var results = JSON.parse(xhr.responseText);
                if(results.artists) {
                    results.artists.forEach((a) => this.results.push(a.name));
                }
                if(results.tracks) {
                    results.tracks.forEach((t) => this.results.push(t.title));
                }
                this.subject.notifyObservers();
            }
        };
        xhr.send();
    },

    register: function(view) {
        this.subject.removeAll();
        this.subject.add(view);
    }
};

var SearchView = {
    listElement: document.querySelector('ul'),
    _emptyTpl: () => '<em>No results.</em>',
    _itemTpl: (result) => `<li>${result}</li>`,

    notify: function() {
        var html = "";
        if(SearchModel.results.length) {
            SearchModel.results.forEach((result) => {
                html += this._itemTpl(result);
            });
        } else {
            html = this._emptyTpl();
        }
        this.listElement.innerHTML = html;
    }
};

var SearchController = function() {
    var inputElement = document.querySelector('input');

    inputElement.oninput = () => SearchModel.search(inputElement.value.trim());
};
	<!doctype html>
	<html>
	<head>
	<meta charset='utf-8'>
	<title>Index</title>
	</head>
	<body>
	<input type="text" placeholder="gtype suggest">
	<ul></ul>

	<script src="model.js"></script>
	<script>
	var controller = new SearchController();
	SearchModel.register(SearchView);
	</script>
	</body>
	</html>
	function Subject() {
	var observers = [];

	return {
	add: function(item) {
	observers.push(item);
	},
	removeAll: function() {
	observers = [];
	},
	notifyObservers: function() {
	observers.forEach((o) => o.notify());
	}
	}
	};

	var SearchModel = {
	subject: new Subject(),

	query: "",
	results: [],
	/* advanced: filters, sort, etc... */

	search: function(query) {
	query = encodeURIComponent(query);
	/* check length, set additional parameters... */
	var xhr = new XMLHttpRequest();
	xhr.open("GET", "http://localhost/search?json&q="+query);
	xhr.onreadystatechange = () => {
	if(xhr.readyState == 4 && xhr.status == 200) {
	this.query = query;
	this.results = [];
	var results = JSON.parse(xhr.responseText);
	if(results.artists) {
	results.artists.forEach((a) => this.results.push(a.name));
	}
	if(results.tracks) {
	results.tracks.forEach((t) => this.results.push(t.title));
	}
	this.subject.notifyObservers();
	}
	};
	xhr.send();
	},

	register: function(view) {
	this.subject.removeAll();
	this.subject.add(view);
	}
	};

	var SearchView = {
	listElement: document.querySelector('ul'),
	_emptyTpl: () => '<em>No results.</em>',
	_itemTpl: (result) => `<li>${result}</li>`,

	notify: function() {
	var html = "";
	if(SearchModel.results.length) {
	SearchModel.results.forEach((result) => {
	html += this._itemTpl(result);
	});
	} else {
	html = this._emptyTpl();
	}
	this.listElement.innerHTML = html;
	}
	};

	var SearchController = function() {
	var inputElement = document.querySelector('input');

	inputElement.oninput = () => SearchModel.search(inputElement.value.trim());
	};