3

Estou fazendo um teclado

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

Ele da sugestões de acordo com oque o usuário vai digitando, meu script de sugestão funciona quando eu digito pelo teclado físico, porém quando tento digitar no campo input utilizando o teclado virtual, as sugestões de palavras não aparecem.

Estou capturando os eventos digitados no input utilizando o addEventListener assim

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

Nele eu chamo a função search para conseguir mostrar as sugestões, porém não está funcionando pelo teclado virtual mesmo ele colocando as palavras corretamento no input.

As teclas dos meu teclado virtual estão sendo reconhecidas pelo evento click do jquery, e atualizando o input utilizando

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

Como posso fazer meu teclado virtual funcionar como o teclado físico e apresentar as sugestões?

1 Resposta 1

2

Basta chamar a função search() no final da função do evento click dos botões do teclado virtual, já que é ela que dispara as sugestões:

$(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!
    });
});

Veja:

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>

1
  • 1
    Exatamente isso, me embaralhei achado que tinha que chamar no addEventListener assim como o fisico rsrsrs, obrigado pela ajuda! Commented 13/08/2019 às 14:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .