jQuery PHP Ajax Autocomplete
Existem duas funções no bloco de código abaixo. o primeiro uma ‘sugerir’ executa a solicitação ajax com base na entrada usuários no campo de texto que é passado para a função quando a função for executada. Nós referenciar a entrada com “inputString” a variável.
a primeira secção do código é uma simples se instrução para verificar se o comprimento da entrada de utilizadores na caixa de texto é mais do que 0. Se for, corremos o pedido ajax para obter a lista de sugestões do banco de dados. #country refere-se à ID da entrada de texto em nosso formulário. Você pode ver que estamos adicionando “carga” a classe para a entrada de texto. Isso é para mostrar um gif animado de carga para mostrar ao usuário que está recebendo dados do banco de dados.
Usamos, então, ‘$post’. Para postar o texto de entrada que os usuários do ‘autosuggest.php’ página para processamento. A página autosuggest.php simples retorna um resultado baseado em um LIKE% query sql.
Uma vez que temos dados de volta do arquivo ‘autosuggest.php’, que desbotam com o caixa de sugestões e injetar o conteúdo na div o ‘#suggestionsList’ usando ‘. Html’. Nós finalmente remover o ‘load’ classe que remove o gif animado carregamento.
“Fill ()” A função preenche o campo de entrada de texto com a seleção usuários se clicar em um país da lista sugeriu, então, desaparece a div ‘#suggestions” removê-lo da página.
[sourcecode language=”javascript”]
function suggest(inputString){
if(inputString.length == 0) {
$(‘#suggestions’).fadeOut();
} else {
$(‘#country’).addClass(‘load’);
$.post("autosuggest.php", {queryString: ""+inputString+""}, function(data){
if(data.length >0) {
$(‘#suggestions’).fadeIn();
$(‘#suggestionsList’).html(data);
$(‘#country’).removeClass(‘load’);
}
});
}
}
function fill(thisValue) {
$(‘#country’).val(thisValue);
setTimeout("$(‘#suggestions’).fadeOut();", 600);
}
[/sourcecode]
Este é o código HTML necessário para obter o autosuggest característica de trabalho. Sua forma simples, com uma entrada de texto com um atributo onkeyup e onBlur. A caixa de sugestão com a seta está situado abaixo do formulário de entrada e posicionados absolutamente em relação ao div sugerir.
[sourcecode language=”html”]
<form id="form" action="#">
<div id="suggest">Start to type a country:
<input id="country" onkeyup="suggest(this.value);" size="25" type="text" />
<div id="suggestions" class="suggestionsBox" style="display: none;">
<img style="position: relative; top: -12px; left: 30px;" src="arrow.png"alt="upArrow" />
<div id="suggestionsList" class="suggestionList"></div>
</div>
</div>
</form>
[/sourcecode]
Para ver a demostração clique aqui, ou para fazer o download clique aqui.