1
2
3
4
5
6

$.fn.extend({clickPrevented: function(fn) {
	$(this).click(function(e) {
		e.preventDefault();
		fn(e);
	});
}});

A utilização aconteceria mais ou menos assim:

1
2
3

$('#apenas_um_cara').clickPrevented(function(){
        alert('Você vai continuar nesta página após o alert.');
});

1
2
3
4
5

$('a').click(function(){
    var href = $(this).attr('href');
    window.open(href);
    return false;
});

Este exemplo em jQuery, se executado, fará com que todos os links desta página sejam abertos em uma nova guia. O return false na linha 4 serve para barrar o evento padrão do link. Se o return for omitido, o destino do link vai ser aberto em uma nova guia e também na página atual.

preventDefault: uma alternativa mais elegante

Descobri recentemente o método preventDefault que acaba sendo muito mais prático e menos sujo do que o return false:

1
2
3
4
5

$('a').click(function(event){
    event.preventDefault();
    var href = $(this).attr('href');
    window.open(href);
});

Além de fazer muito mais sentido do que o return, preventDefault pode ser colocado em qualquer parte do evento, não interrompendo o fluxo da função.

window.name = 'testando';

Se você rodar este exemplo, for para outra página e inspecionar o conteúdo da propriedade window.name vai perceber que o valor continua sendo testando. Ou seja, esta informação continua guardada, simulando uma sessão.

Infelizmente window.name consegue armazenar somente strings. Em um outro post pretendo demonstrar como podemos serializar os dados nesta propriedade. Serializando os dados seria possível armazenar qualquer tipo de vetor, objeto ou função. A maioria dos navegadores consegue armazenar até 10Mb de informações na propriedade.

O ideal seria utillizar uma sessão genuína via back-end, utilizando PHP, C#, Java, etc. Mas como todos nós sabemos, às vezes a realizade exige soluções um tanto quanto “criativas”.

O problema da acentuação

Infelizmente o plugin é rígido ao tratar caracteres. O comportamente desejado era que os mesmos resultados fossem devolvidos digitando-se, por exemplo, “são” ou “sao” (São Paulo e outros resultados apareceriam neste caso). Isso não acontecia. Ao digitar sao, “São Paulo” não era um dos resultados. Entretanto, percebi que o plugin não diferenciava caixa alta e baixa: SÃO e são retornam o mesmo resultado.

A gambiarra

Modificar plugins é uma péssima prática por vários motivos:

• um bug pode ser introduzido (e só percebido depois)
• se uma nova versão do plugin for lançada, a modificação tem que ser refeita
• pior: a modificação pode não funcionar numa nova versão

Plugins bem feitos geralmente fornecem formas de personalização do comportamento através de objetos de configuração. Em algumas situações, como no nosso caso, isso não é possível. Vasculhei o código do plugin pelo método toLowerCase (conversão de caixa alta para caixa baixa):

177
178
179
180

if( data[i].result.toLowerCase() == q.toLowerCase() ) {
    result = data[i];
    break;
}

255
256

if (!options.matchCase)
    currentValue = currentValue.toLowerCase();

Continuei buscando e encontrei ocorrências da conversão em mais cinco ou seis lugares. Então criei um método prototype para o objeto String chamado filterData:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

String.prototype.filterData = function() { 
 
    var
    str = this.toLowerCase(),
    specialChars = [
        {val:'a', let:'áàãâä'},
	{val:'e', let:'éèêë'},
	{val:'i', let:'íìîï'},
	{val:'o', let:'óòõôö'},
	{val:'u', let:'úùûü'},
	{val:'c', let:'ç'},
    ],
    regex;
 
    for (var i in  specialChars) {
	regex = new RegExp('[' + specialChars[i].let + ']', 'g');
	str = str.replace(regex, specialChars[i].val);
	regex = null;
    }
 
    return str;
};
 
// Exemplo de uso
alert('Isto é um teste. NÃO podemos ter acentos nem CAIXA ALTA!'.filterData());

Finalmente, para encerrar a gambiarra, substitui no código do plugin todas as ocorrências de toLowerCase para filterData:

177
178
179
180

if( data[i].result.filterData() == q.filterData() ) {
    result = data[i];
    break;
}

255
256
257
258

if (!options.matchCase)
    currentValue = currentValue.filterData();
 
// e em todo o resto do plugin

E funciona! Vou tentar entrar em contato com o autor do plugin sugerindo esta funcionalidade para a próxima versão.

Observação: utilize UTF-8

Para esta modificação funcionar a página HTML deve ter o seu charset declarado como UTF-8. O charset ISO-8859-1 não funciona. Sei disso porque a página original teve que ser alterada para UTF-8. Com ISO-8859-1 buscas com acentos não retornavam resultado algum. Mistério, não tenho idéia porque isso ocorre.