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.

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);
}

O HTML.

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.


<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>

Incluído no pacote de download é o banco de dados. Sql arquivo necessário para criar a tabela para procurar. Você poderia, contudo, modificar a consulta SQL para apontar para uma tabela diferente. Os detalhes da conexão do banco de dados também são declaradas no topo da página autosuggest.php entretanto, é aconselhável a abstrair-los da página.

Para ver a demostração clique aqui, ou para fazer o download clique aqui.

Fonte: http://papermashup.com/jquery-php-ajax-autosuggest/

Deixe sua resposta