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); }
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>
Para ver a demostração clique aqui, ou para fazer o download clique aqui.