Click run suggestion function

Question

I’m making a keyboard

https://codepen.io/patrique-alves/pen/oNvbwBw

It gives suggestions according to what the user is typing, my suggestion script works when I type through the physical keyboard, but when I try to type in the input field using the virtual keyboard, word suggestions do not appear.

I’m capturing the events typed in the input using addeventlistener like this

input.addEventListener("input", search, false);

In it I call the search function to be able to show the suggestions, but it is not working by the virtual keyboard even if it puts the correct words in the input.

My virtual keyboard keys are being recognized by the jquery click event, and updating the input using

$('#searchBox').val("exemplo");

How can I make my virtual keyboard work like the physical keyboard and present suggestions?

Answer 1

Just call the function search() at the end of the event function click of the virtual keyboard buttons, since it triggers the suggestions:

$(document).ready(function(){
    $('#teclado div span').on("click", function(){
        var pos = $('#searchBox').get(0).selectionStart;
        var val = $('#searchBox').val();
        var palavra = $(this).attr('rel');

        if (palavra == 'apagar'){
            $('#searchBox').val(val.substr(0,pos-1) + val.substr(pos)).focus().get(0).setSelectionRange(pos-1, pos-1);
        } else if (palavra == 'erase') {
            $('#searchBox').val('');
            $('#searchBox').setCursorPosition(0);
            $('#searchBox').focus();
        } else {
            $('#searchBox').val(val.substr(0,pos) + palavra + val.substr(pos)).focus().get(0).setSelectionRange(pos+1, pos+1);
        }
      search(); // chama a função aqui!
    });
});

Behold:

var searchIndex = ["Brasil", "Alemanha", "Espanha", "França", "Bélgica", "Portugal", "Itália", "Onduras", "Marrocos", "Botafogo", "Vasco", "Flamengo", "Fluminense", "Madureira", "Rio de Janeiro", "São Paulo", "Recife", "Bahia", "Manaus", "Salvador", "Londrina", "Brasília"];
var input = document.getElementById("searchBox"), ul = document.getElementById("searchResults"), inputTerms, termsArray, prefix, terms, results, sortedResults;

var search = function() {
	inputTerms = input.value.toUpperCase();
	results = [];
	termsArray = inputTerms.split(' ');
	prefix = termsArray.length === 1 ? '' : termsArray.slice(0, -1).join(' ') + ' ';
	terms = termsArray[termsArray.length - 1].toUpperCase();
	for (var i = 0; i < searchIndex.length; i++) {
		var a = searchIndex[i].toUpperCase(), t = a.indexOf(terms);
		if (t > -1) {
			results.push(a);
		}
	}
	evaluateResults();
};

var evaluateResults = function() {
	if (results.length > 0 && inputTerms.length > 0 && terms.length !== 0) {
		sortedResults = results.sort(sortResults);
		appendResults();
	} else if (inputTerms.length > 0 && terms.length !== 0) {
		clearResults();
	} else if (inputTerms.length !== 0 && terms.length === 0) {
		return;
	} else {
		clearResults();
	}
};

var sortResults = function(a, b) {
	if (a.indexOf(terms) < b.indexOf(terms)) return -1;
	if (a.indexOf(terms) > b.indexOf(terms)) return 1;
	return 0;
}

var appendResults = function() {
	clearResults();
	for (var i = 0; i < sortedResults.length && i < 5; i++) {
		var li = document.createElement("li"),
		result = prefix +
		sortedResults[i].toUpperCase().replace(terms, '<strong>' +
		terms +
		'</strong>');
		li.innerHTML = result;
		ul.appendChild(li);
	}
	$('li').click(function(e) {
		$('input').val($(this).text());
	});
	if (ul.className !== "term-list") {
		ul.className = "term-list";
	}
};

var clearResults = function() {
	ul.className = "term-list hidden";
	ul.innerHTML = '';
};

//input.addEventListener("keyup", search, false);
input.addEventListener("input", search, false);

$(document).ready(function(){
	$('#teclado div span').on("click", function(){
		var pos = $('#searchBox').get(0).selectionStart;
		var val = $('#searchBox').val();
		var palavra = $(this).attr('rel');
		
		if (palavra == 'apagar'){
			$('#searchBox').val(val.substr(0,pos-1) + val.substr(pos)).focus().get(0).setSelectionRange(pos-1, pos-1);
		} else if (palavra == 'erase') {
			$('#searchBox').val('');
			$('#searchBox').setCursorPosition(0);
			$('#searchBox').focus();
		} else {
			$('#searchBox').val(val.substr(0,pos) + palavra + val.substr(pos)).focus().get(0).setSelectionRange(pos+1, pos+1);
		}
      search();
	});
});

input:focus { 
	border: 1px solid #ccc;
	outline:0;
}
.search-field,
.term-list {
}

.search-field {
	display: block;
	width: 836px;
	margin: 1em auto 0;
	padding: 0.5em 10px;
	border: 1px solid #ccc;
	font-size: 130%;
	font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
	font-weight: 200;
	color: #888;
}
.term-list {
	z-index: 2;
	position: fixed;
	right: 0;
	left: 0;
	list-style: none inside;
	width: 836px;
	margin: 0 auto 2em;
	padding: 5px 10px 0;
	text-align: left;
	color: #777;
	background: #fff;
	border: 1px solid #ddd;
	font-family: "Arvo", "Helvetica Neue", Helvetica, arial, sans-serif;
	font-weight: 400;
}
.term-list li {
	padding: 0.5em 0;
	border-bottom: 1px solid #eee;
}
.term-list strong {
	color: #444;
	font-weight: 700;
}
.hidden {
	display: none;
}

/* teclado */
#teclado {
	width: 1000px;
	height: auto;
	padding: 0;
	text-align: center;
	font-size: 0;
}
.teclas {
	overflow: hidden;
}
.teclas span {
	vertical-align: top;
	display: inline-block;
	position: relative;
	top: 0;
	background: #fff;
	border: 1px solid #ccc;
	font-size: 16px;
	cursor: pointer;
	width: 64px;
	height: 48px;
	box-shadow: 2px 2px 2px 2px rgba(153, 153, 153, 0.1);
	margin: 0 6px 6px 0;
	color: #999;
	line-height: 48px;
	text-align: center;
	user-select: none;
	outline: 0 solid;
	transition: all 0.2s ease;
}
.teclas span:hover {
	background: #fff;
	color: #000;
}
.teclas span:active {
	top: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="margin-top: 60px">
	<input type="text" id="searchBox" class="search-field" placeholder="Procurar por um local, serviço ou produto..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
	<ul id="searchResults" class="term-list hidden"></ul>
</div>

<div class="teclado" style="display: table; margin: 0 auto; position: relative; left: 0px; top: 22px;">
	<div id="teclado">
		<div class="teclas">
			<span rel="1">1</span>
			<span rel="2">2</span>
			<span rel="3">3</span>
			<span rel="4">4</span>
			<span rel="5">5</span>
			<span rel="6">6</span>
			<span rel="7">7</span>
			<span rel="8">8</span>
			<span rel="9">9</span>
			<span rel="0">0</span>
			<div style="clear: both"></div>
			<span rel="Q">Q</span>
			<span rel="W">W</span>
			<span rel="E">E</span>
			<span rel="R">R</span>
			<span rel="T">T</span>
			<span rel="Y">Y</span>
			<span rel="U">U</span>
			<span rel="I">I</span>
			<span rel="O">O</span>
			<span rel="P">P</span>
			<span style="width: 134px" rel="apagar">APAGAR</span>
			<div style="clear: both"></div>
			<span rel="A">A</span>
			<span rel="S">S</span>
			<span rel="D">D</span>
			<span rel="F">F</span>
			<span rel="G">G</span>
			<span rel="H">H</span>
			<span rel="J">J</span>
			<span rel="K">K</span>
			<span rel="L">L</span>
			<span rel="Ç">Ç</span>
			<span style="width: 134px" rel="avancar">AVANÇAR</span>
			<div style="clear: both"></div>
			<span rel="Z">Z</span>
			<span rel="X">X</span>
			<span rel="C">C</span>
			<span rel="V">V</span>
			<span rel="B">B</span>
			<span rel="N">N</span>
			<span rel="M">M</span>
			<span rel="@">@</span>
			<span rel=".">.</span>
			<span rel=",">,</span>
			<span rel="-">-</span>
			<span rel="&">&</span>
			<div style="clear: both"></div>
			<span rel="Ã">Ã</span>
			<span rel="Á">Á</span>
			<span style="width: 352px" rel=" "><center>ESPAÇO</center></span>
			<span rel="Ê">Ê</span>
			<span rel="É">É</span>
			<span rel="Ô">Ô</span>
			<span rel="Ó">Ó</span>
			<span rel="_">_</span>
		</div>
	</div>
</div>