Inicio>Relacionado con la programación>Otro código fuente
Descargar

Búsqueda en vivo AJAX

*** Esto ya no se mantiene *** Comencé este proyecto hace unos años, pero hasta ahora han cambiado muchas cosas. Además, debido al acoplamiento entre diferentes capas y también a tecnologías antiguas (¡jQuery!), este no es un proyecto escalable. Muchas gracias por todo el apoyo pero lamentablemente tengo que archivar este proyecto :(

AJAX Live Search es un complemento jQuery/formulario de búsqueda PHP que busca y muestra el resultado a medida que escribe, de forma similar a la función Autocompletar de Google.

Manifestación

Compruébalo en acción.

Soporte del navegador

Es decir, 8+ ✔ Cromo ✔ Firefox ✔ Ópera ✔ Safari ✔

Gracias a BrowserStack y JetBrains por apoyar este proyecto.

Comenzando con Ajax Live Search

Hacer que funcione el ejemplo actual en index.php incluida la creación de una base de datos ficticia y una tabla, no debería llevar más de 7 minutos. Pero se necesitará más en caso de que necesite integrarlo en un proyecto existente. Para lograrlo, supongamos que tiene este campo de texto:

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

  1. Copie las carpetas, incluidas core , css , font , img , js y templates , a su proyecto.

  2. Especifique las configuraciones requeridas, especialmente las configuraciones de la base de datos, en core/Config.template.php y cambie el nombre del archivo a Config.php . Este archivo contiene todas las configuraciones de back-end para el complemento que se han explicado en la tabla de configuraciones de PHP.

  3. Incluya js/ajaxlivesearch.min.js o js/ajaxlivesearch.js y css/ajaxlivesearch.min.css o css/ajaxlivesearch.css en su página.

  4. Cambie la URL del Access-Control-Allow-Origin header en core/AjaxProcessor.php a la URL de su proyecto. Actualmente es https://ajaxlivesearch.com .

  5. Asegúrese de que core/Handler.php y core/Config.php estén incluidos en su página (PHP) y que tenga estas líneas en la parte superior del archivo (compruebe index.php ): 

     use AjaxLiveSearchcoreConfig;
use AjaxLiveSearchcoreHandler;

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

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

  6. Por último, conecte el complemento al campo de texto y pase las opciones requeridas (loaded_at y token):

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

También puede publicar parámetros adicionales en el servidor si lo necesita. Para lograr esto, debe agregar atributos data a la entrada de búsqueda: 

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

Por ejemplo, en este caso puedes acceder al atributo de datos en PHP así: 

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

Opciones de jQuery

Nombre Tipo Requerido Descripción
cargado_en Entero Sí Esto se utiliza para evitar que los robots realicen búsquedas.
simbólico Cadena Sí Esto se utiliza para prevenir el ataque CSRF.
URL Cadena No Predeterminado: ajax/process_livesearch.php.
cache Booleano No Esto se refiere al almacenamiento en caché de solicitudes Ajax. Predeterminado: falso
formulario_anti_bot Cadena No Predeterminado: ajaxlivesearch_guard
velocidad_deslizamiento Cadena No Predeterminado: rápido
tipo_retraso Entero No Predeterminado: 350
entrada_max Entero No Predeterminado: 20
min_chars_to_search Entero No Longitud mínima de caracteres para iniciar la búsqueda. Predeterminado: 0
rangos de páginas Formación No Predeterminado: [0, 5, 10]
rango_página_predeterminado Entero No Predeterminado: 5
form_anti_bot_clase Cadena No Predeterminado: ls_anti_bot
clase_pie de página Cadena No Valor predeterminado: ls_result_footer
clase_página_siguiente Cadena No Valor predeterminado: ls_next_page
clase_página_anterior Cadena No Valor predeterminado: ls_previous_page
límite_página Cadena No Predeterminado: límite de página
clase_envoltura_resultado Cadena No Valor predeterminado: ls_result_div
clase_resultado Cadena No Valor predeterminado: ls_result_main
clase_contenedor Cadena No Predeterminado: ls_container
clase_paginación Cadena No Predeterminado: paginación
clase_formulario Cadena No Predeterminado: buscar
cargado_en_clase Cadena No Valor predeterminado: ls_page_loaded_at
clase_token Cadena No Predeterminado: ls_token
clase_oculta_página_actual Cadena No Valor predeterminado: ls_current_page
clase_lbl_página_actual Cadena No Valor predeterminado: ls_current_page_lbl
última_página_lbl_clase Cadena No Valor predeterminado: ls_last_page_lbl
clase_página_total_lbl Cadena No Valor predeterminado: ls_last_page_lbl
clase_rango_página Cadena No Valor predeterminado: ls_items_per_page
clase_navegación Cadena No Predeterminado: navegación
clase_flecha Cadena No Predeterminado: flecha

Evento personalizado

Nombre
onResultClick
onResultEnter
enAjaxComplete

Ejemplo: 

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

    }
});

Disparador personalizado

Nombre
ajaxlivesearch: ocultar_resultado
ajaxlivesearch: buscar

Configuraciones PHP

Nombre Tipo Requerido Descripción
fuentes de datos Formación Sí Fuente de datos para cada campo de texto de búsqueda. Las claves se refieren al campo HTML id. Actualmente se admiten MySQL y mongoDB (esto está en versión beta).

Configuraciones de fuente de datos MySQL:
Nombre Tipo Requerido Descripción
anfitrión Cadena Sí Alojamiento de base de datos MySQL. Suele ser "localhost".
base de datos Cadena Sí Nombre de la base de datos MySQL.
nombre de usuario Cadena Sí Nombre de usuario de la base de datos MySQL.
aprobar Cadena Sí Contraseña de nombre de usuario de la base de datos MySQL.
mesa Cadena Sí Tabla de base de datos MySQL en la que busca la búsqueda en vivo.
columnas de búsqueda Formación Sí Columnas de búsqueda en las que busca la búsqueda en vivo. Puede ser una o varias. por ejemplo, matriz('nombre_columna_1', 'nombre_columna_2')
ordenar por Cadena No Columna en la que se ordena el resultado en base a ella.
ordenDirección Cadena No Dirección del pedido: 'ASC' o 'DESC' para 'orderBy'. Valor predeterminado: ASC
filtrarResultado Formación No Columnas que deben estar en el resultado. Si está vacío se devolverán todas las columnas.
comparaciónOperador Cadena Sí Operador de comparación de consultas de búsqueda. Los valores posibles para los operadores de comparación son: 'ME GUSTA' y '='.
patrón de búsqueda Cadena Sí Esto se utiliza para especificar cómo se busca la consulta. los valores posibles son: `q`, `*q`, `q*`, `*q*`.
distingue mayúsculas y minúsculas Cadena Sí Sensibilidad entre mayúsculas y minúsculas en las consultas de búsqueda
resultado máximo Entero No Esto se utiliza para limitar el número máximo de resultados.
mostrar encabezado Formación No Esto se utiliza para mostrar u ocultar el encabezado en el resultado. Si 'activo' se establece en verdadero, se muestra el encabezado. Además, es posible asignar columnas a diferentes títulos.
tipo Cadena Sí Tipo de fuente de datos. Los valores posibles actualmente son: 'mysql' o 'mongo'.
antibot Cadena Sí Esto se utiliza como técnica de seguridad para evitar el envío de formularios por parte de aquellos bots que no utilizan JavaScript. En esta técnica, se completa un campo oculto usando jQuery con este valor. Puede tener cualquier valor, pero DEBE ser el mismo que la opción `form_anti_bot` pasada al complemento jQuery. Por defecto está configurado en `ajaxlivesearch_guard`.
búsquedaStartTimeOffset Entero Sí Esto se utiliza como otra técnica de seguridad contra los bots. Algunos bots envían inmediatamente un formulario una vez que la página termina de cargarse. Sin embargo, al ser humano le lleva más tiempo llenar un campo. Por defecto, este parámetro está establecido en 3 segundos. No se recomienda asignar más de 3 segundos.
longitud máxima de entrada Entero Sí Esto especifica la longitud máxima de caracteres en el campo de búsqueda.
plantilla Cadena Sí Esto especifica el nombre de la plantilla ubicada en la carpeta de plantillas.

Preguntas frecuentes

  • ¿Cuál es el riesgo de desactivar anti_bot y token?

    form_anti_bot es una buena característica de seguridad, pero debería estar bien eliminarla. Para lograr esto, necesita cambiar validateRequest() en core/AjaxProcessor.php y eliminar $_POST['ls_anti_bot'] , así como cambiar verifySessionValue($sessionParameter, $sessionValue) en core/Handler.php . Por el contrario, eliminar el token permite que cualquiera pueda crear un formulario y utilizar su servidor como fuente de datos y, por lo tanto, no se recomienda. Actualmente, cada vez que se carga la página/formulario de búsqueda, se genera un nuevo token llamando getToken() en la página del formulario ( index.php en el ejemplo actual). Luego, el token y el anti_bot se verifican usando verifySessionValue($sessionParameter, $sessionValue) al buscar/enviar una nueva solicitud al servidor. Si esto le parece excesivo, en getToken() devuelva el mismo token para la sesión existente.

  • ¿Cómo se puede ocultar una columna en el resultado?

    Esto se puede lograr en su plantilla. Se puede encontrar un ejemplo en templates/hiddenColumn.php

Licencia

Licencia MIT

¡Cómprame medio café si quieres!

Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo