Estou construindo um select customizado com autocomplete e para isto estou usando algumas <div>
's, um <input>
e jQuery.
Eu gostaria que ele tivesse o mesmo comportamento padrão de um select HTML de quando se clica fora do mesmo, ele se fecha.
Meu HTML, em linhas gerais, está assim:
<div class="my-select-container">
<input id="my-input" type="text" value="" onkeyup="myAutocomplete(this);">
<div class="my-options-container"></div>
</div>
Estou usando a função JavaScript myAutocomplete()
para fazer todo trabalho de auto complete e manipular as divs com sucesso, meu único problema é fazer a div my-options-container
se fechar ao clicar fora do select.
A função myAutocomplete()
é a seguinte:
function autocomplete_region(obj) {
var value = $(obj).val();
// Only executes if there is some text on search input
if (value) {
// Mount request URL
var url = '/options/' + value + '/';
// Send the request to server
$.get(url,
function (response) {
// Continues only if there is a response
var options = (response["options"] == undefined) ? response : response["options"];
if (options.length > 0) {
// Clear old options
$('#my-options-container').html('');
// Populate items
for (var i = 0; i < options.length; i++) {
var href_value = '/?code=' + options[i].code + '/';
var item = '<a id="option_' + i + '" href="' + href_value + '"><div>' + options[i].text + '</div></a>';
$('#my-options-container').html($('#my-options-container').html() + item);
}
// Shows options div
if ($('#my-options-container').is(':hidden'))
$('#my-options-container').show();
} else {
$('#my-options-container').html('<span>Ops! Nenhuma opção disponível.</span>');
// Shows options div
$('#my-options-container').show();
}
});
} else {
// Hides options div
$('#my-options-container').hide();
// Empty options div
$('#my-options-container').html('');
}
}
focused
ou como o nativo quando clicares fora?focused
seria melhor.myAutocomplete()
na pergunta porque ela ficou relativamente grande por fazer outras coisas como pegar as opções em uma API além de apenas mostrar e esconder a<div>
que mostra as opções.