Página Inicial>Relacionado com a programação>Outro código-fonte
Baixar

Pesquisa ao vivo AJAX

*** Isso não é mais mantido *** Comecei esse projeto há alguns anos, mas muita coisa mudou até agora. Além disso, devido ao acoplamento entre diferentes camadas e também a tecnologias antigas (jQuery!), Este não é um projeto escalável. Muito obrigado por todo o apoio, mas infelizmente tenho que arquivar este projeto :(

AJAX Live Search é um plugin jQuery / formulário de pesquisa PHP que pesquisa e exibe o resultado conforme você digita, semelhante ao recurso de preenchimento automático do Google.

Demonstração

Confira em ação.

Suporte ao navegador

Ou seja, 8+ ✔ Cromo✔ Firefox✔ Ópera✔ Safári✔

Obrigado ao BrowserStack e JetBrains por apoiar este projeto.

Introdução ao Ajax Live Search

Fazer com que o exemplo atual em index.php funcione, incluindo a criação de um banco de dados fictício e uma tabela, não deve levar mais de 7 minutos. Mas será necessário mais caso você precise integrá-lo a um projeto existente. Para conseguir isso, supondo que você tenha este campo de texto:

<input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ...">

  1. Copie as pastas incluindo core , css , font , img , js e templates para o seu projeto.

  2. Especifique as configurações necessárias, especialmente configurações de banco de dados em core/Config.template.php e renomeie o arquivo para Config.php . Este arquivo contém todas as configurações de back-end do plugin que foram explicadas na tabela PHP Configs.

  3. Inclua js/ajaxlivesearch.min.js ou js/ajaxlivesearch.js e css/ajaxlivesearch.min.css ou css/ajaxlivesearch.css em sua página.

  4. Altere o URL do Access-Control-Allow-Origin header em core/AjaxProcessor.php para o URL do seu projeto. Atualmente é https://ajaxlivesearch.com .

  5. Certifique-se de que core/Handler.php e core/Config.php estejam incluídos em sua página (PHP) e que você tenha estas linhas no topo do arquivo (Verifique index.php ): 

     use AjaxLiveSearchcoreConfig;
use AjaxLiveSearchcoreHandler;

if (session_id() == '') {
    session_start();
}

$handler = new Handler();
$handler->getJavascriptAntiBot();

  6. Por último, conecte o plugin ao campo de texto e passe as opções necessárias (loaded_at & token):

jQuery("#ls_query").ajaxlivesearch({ carregado_at: , token: getToken() . "'"; ?>, max_input: , }); ```

Você também pode postar parâmetros adicionais no servidor, se necessário. Para conseguir isso, você deve adicionar atributos data à entrada de pesquisa: 

 <input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ..." data-additionalData="hello world!">

Por exemplo, neste caso você pode acessar o atributo data em PHP assim: 

 // key is transformed to lowercase
$additionalData = $_POST['additionaldata'];

Opções jQuery

Nome Tipo Obrigatório Descrição
carregado_em Inteiro Sim Isso é usado para evitar que os bots pesquisem.
ficha Corda Sim Isso é usado para evitar ataques CSRF.
url Corda Não Padrão: ajax/process_livesearch.php.
esconderijo Booleano Não Isso se refere ao cache de solicitação do Ajax. Padrão: falso
form_anti_bot Corda Não Padrão: ajaxlivesearch_guard
slide_speed Corda Não Padrão: rápido
tipo_atraso Inteiro Não Padrão: 350
entrada_max Inteiro Não Padrão: 20
min_chars_to_search Inteiro Não Comprimento mínimo de caracteres para iniciar a pesquisa. Padrão: 0
intervalos_de_páginas Variedade Não Padrão: [0, 5, 10]
intervalo_de_páginas_padrão Inteiro Não Padrão: 5
form_anti_bot_class Corda Não Padrão: ls_anti_bot
classe_de_rodapé Corda Não Padrão: ls_result_footer
próxima_página_class Corda Não Padrão: ls_next_page
anterior_page_class Corda Não Padrão: ls_página anterior
limite_de_página Corda Não Padrão: limite_página
resultado_wrapper_class Corda Não Padrão: ls_result_div
classe_resultado Corda Não Padrão: ls_result_main
classe_contêiner Corda Não Padrão: ls_container
paginação_class Corda Não Padrão: paginação
classe_formulário Corda Não Padrão: pesquisa
carregado_em_class Corda Não Padrão: ls_page_loaded_at
token_class Corda Não Padrão: ls_token
current_page_hidden_class Corda Não Padrão: ls_current_page
current_page_lbl_class Corda Não Padrão: ls_current_page_lbl
last_page_lbl_class Corda Não Padrão: ls_last_page_lbl
total_page_lbl_class Corda Não Padrão: ls_last_page_lbl
intervalo_de_páginas Corda Não Padrão: ls_items_per_page
classe_navegação Corda Não Padrão: navegação
arrow_class Corda Não Padrão: seta

Evento personalizado

Nome
onResultClick
onResultEnter
onAjaxComplete

Exemplo: 

 jQuery(".mySearch").ajaxlivesearch({
    loaded_at: <?php echo time(); ?>,
    token: <?php echo "'" . $handler->getToken() . "'"; ?>,
    max_input: <?php echo Config::getConfig('maxInputLength'); ?>,
    onResultClick: function(e, data) {
        // get the index 1 (second column) value
        var selectedOne = jQuery(data.selected).find('td').eq('1').text();

        // set the input value
        jQuery('#ls_query').val(selectedOne);

        // hide the result
        jQuery("#ls_query").trigger('ajaxlivesearch:hide_result');
    },
    onResultEnter: function(e, data) {
        // do whatever you want
        // jQuery("#ls_query").trigger('ajaxlivesearch:search', {query: 'test'});
    },
    onAjaxComplete: function(e, data) {

    }
});

Gatilho personalizado

Nome
ajaxlivesearch:hide_result
ajaxlivesearch:pesquisar

Configurações PHP

Nome Tipo Obrigatório Descrição
fontes de dados Variedade Sim Fonte de dados para cada campo de texto de pesquisa. As chaves referem-se ao campo HTML id. Atualmente MySQL e mongoDB (em beta) são suportados.

Configurações da fonte de dados MySQL:
Nome Tipo Obrigatório Descrição
hospedar Corda Sim Hospedeiro de banco de dados MySQL. Geralmente é 'localhost'.
banco de dados Corda Sim Nome do banco de dados MySQL.
nome de usuário Corda Sim Nome de usuário do banco de dados MySQL.
passar Corda Sim Senha de nome de usuário do banco de dados MySQL.
mesa Corda Sim Tabela de banco de dados MySQL na qual a pesquisa em tempo real pesquisa.
colunas de pesquisa Variedade Sim Colunas de pesquisa nas quais a pesquisa ao vivo pesquisa. Pode ser uma ou várias. por exemplo, array('nome_coluna_1', 'nome_coluna_2')
encomendar por Corda Não Coluna na qual o resultado é ordenado com base nela.
ordemDireção Corda Não Direção do pedido: 'ASC' ou 'DESC' para 'orderBy'. Valor padrão: ASC
filtroResultado Variedade Não Colunas que precisam estar no resultado. Se estiver vazio, todas as colunas serão retornadas.
comparaçãoOperador Corda Sim Operador de comparação de consulta de pesquisa. Os valores possíveis para operadores de comparação são: 'LIKE' e '='.
padrão de pesquisa Corda Sim Isso é usado para especificar como a consulta é pesquisada. os valores possíveis são: `q`, `*q`, `q*`, `*q*`.
maiúsculas e minúsculas Corda Sim Sensibilidade a maiúsculas e minúsculas na consulta de pesquisa
maxResult Inteiro Não Isso é usado para limitar o número máximo de resultados.
displayHeader Variedade Não Isso é usado para exibir ou ocultar o cabeçalho no resultado. Se 'ativo' estiver definido como verdadeiro, o cabeçalho será exibido. Além disso, é possível mapear colunas para títulos diferentes.
tipo Corda Sim Tipo da fonte de dados. Os valores atualmente possíveis são: 'mysql' ou 'mongo'.
antiBot Corda Sim Isso é usado como uma técnica de segurança para evitar envios de formulários por bots que não usam JavaScript. Nesta técnica, um campo oculto é preenchido usando jQuery com este valor. Pode ter qualquer valor, mas DEVE ser igual à opção `form_anti_bot` passada para o plugin jQuery. Por padrão, é definido como `ajaxlivesearch_guard`.
searchStartTimeOffset Inteiro Sim Isso é usado para outra técnica de segurança contra bots. Alguns bots enviam imediatamente um formulário assim que a página termina de carregar. Porém, para os seres humanos leva mais tempo para preencher um campo. Por padrão, esse parâmetro é definido como 3 segundos. Atribuir mais de 3 segundos não é recomendado.
maxInputLength Inteiro Sim Isto especifica o comprimento máximo de caracteres no campo de pesquisa.
modelo Corda Sim Isto especifica o nome do modelo localizado na pasta de modelos

Perguntas frequentes

  • Qual é o risco de desativar o anti_bot e o token?

    form_anti_bot é um bom recurso de segurança, mas não há problema em removê-lo. Para conseguir isso, você precisa alterar validateRequest() em core/AjaxProcessor.php e remover $_POST['ls_anti_bot'] bem como alterar verifySessionValue($sessionParameter, $sessionValue) em core/Handler.php . Por outro lado, a remoção do token permite que qualquer pessoa crie um formulário e use seu servidor como fonte de dados e, portanto, não é recomendado. Atualmente, cada vez que a página/formulário de busca é carregado um novo token é gerado chamando getToken() na página do formulário ( index.php no exemplo atual). Em seguida, o token e o anti_bot são verificados usando verifySessionValue($sessionParameter, $sessionValue) ao pesquisar/enviar uma nova solicitação ao servidor. Se isso parecer um exagero para você, em getToken() retorne o mesmo token para a sessão existente.

  • Como uma coluna pode ser ocultada no resultado?

    Isso pode ser alcançado em seu modelo. Um exemplo pode ser encontrado em templates/hiddenColumn.php

Licença

Licença MIT

Compre-me metade de um café, se quiser!

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos