JSFiddle - React, Tailwind, and code Playground

by boorsma

HTML

<input id='input' type='text' placeholder='zoeken naar'>

JavaScript

/*
	ffTypewriter plugin
*/

var arrayShuffle = function(arrayToShuffle) {
	// required variables
	var tmp, // to tempararily store old arrayToShuffle position
			current, // randomly generated index value 
			top = arrayToShuffle.length; // length of arrayToShuffle

	if(top) {
		while(--top) {
			current = Math.floor(Math.random() * (top + 1));
			tmp = arrayToShuffle[current];
			arrayToShuffle[current] = arrayToShuffle[top];
			arrayToShuffle[top] = tmp;
		}
	}

	return arrayToShuffle;
}

// https://css-tricks.com/snippets/css/typewriter-effect/
var ffTypewriter = function(element, string, duration) {
	this.string = string;
	this.element = element;
	this.loopNumber = 0;
	this.duration = parseInt(duration, 10) || 2000;
	this.txt = '';
	this.tick();
	this.isDeleting = false;
};

ffTypewriter.prototype.tick = function() {
	var i = this.loopNumber % this.string.length;
	var fullText = this.string[i];

	if (this.isDeleting) {
		this.txt = fullText.substring(0, this.txt.length - 1);
	} else {
		this.txt = fullText.substring(0, this.txt.length + 1);
	}

	this.element.placeholder = 'Zoeken naar ' + this.txt;

	var that = this;
	var delta = 200 - Math.random() * 100;

	if (this.isDeleting) { delta /= 2; }

	if (!this.isDeleting && this.txt === fullText) {
		delta = this.duration;
		this.isDeleting = true;
	} else if (this.isDeleting && this.txt === '') {
		this.isDeleting = false;
		this.loopNumber++;
		delta = 500;
	}

	setTimeout(function() {
		that.tick();
	}, delta);
};


var json = [  
    {  
        "Title":"Drukwerk [A - Z]",
        "Description":"Al ons drukwerk op een rij.\r\n",
        "Url":"drukwerk/",
        "Image":null,
        "Price":null,
        "PromotionPrice":null,
        "SearchTags":null,
        "Type":"Category"
    },
    {  
        "Title":"Betaling",
        "Description":"Betalen bij Drukwerknodig.nl is makkelijk en veilig. Een voordeel van betalen bij Drukwerknodig.nl is dat u zelf kunt kiezen of u direct wil betalen o",
       ...