[TUTORIAL] Busca com TAGs nos tópicos

Agora podemos aplicar um efeito JS, que ao criar um tópico, terá etiquetas para facilitar a busca por tópicos relacionados.

--> Tutoriais, dicas e astúcias <--
Busca com TAGs nos tópicos

1º - Conhecendo o código:

Código:

/***
 * Application: Tags Search
 * Description: This application can displays tags for searching.
 * Version: 1.09032014-jq1.9.1 - Thoth (Ermoúpoli -> Eshmunen)
 * Made and Optimizations by JScript - 2014/03/09
 * View more in: http://punbb.forumeiros.com
 * Copyright (c) 2013 JScript <jscriptbrasil at live dot com>
 * This work is free. You can redistribute it and/or modify it
 * under the terms of the WTFPL, Version 2
 */
jQuery(function () {
    /***
    * User Definition Variables
    ***/
    /* Put here the limit of tag length!!! */
    var iTagLength = 4;
    /* Put here your tags tool tip!!! */
    var sTagTitle = 'Procurar por:';
    /* Put here your widget title!!! */
    var sTagToolTip = 'Localizar mais conteúdo com a tag';
    /* END */

    /***
    * System Defined Variables - Do not edit if you don't know!
    ***/
    var oConfig = {
        sInfo:
            '<!--' +
            '* Application: Tags Search' +
            '* Description: This application can displays tags for searching.' +
            '* Version: 1.09032014-jq1.9.1 - Thoth (Ermoúpoli -> Eshmunen)' +
            '* Made and Optimizations by JScript - 2014/03/09' +
            '* View more in: http://punbb.forumeiros.com/forum & http://ajuda.forumeiros.com' +
            '* Copyright (c) 2013 JScript <jscriptbrasil at live dot com>' +
            '* This work is free. You can redistribute it and/or modify it' +
            '* under the terms of the WTFPL, Version 2' +
            '-->',       
        sContent:
            '<span id="tags_search"><span>' + sTagTitle + ' </span></span>',
        sCSS:
            '<style>' +
            '#tags_search {' +
                'display: block;' +
                'margin-bottom: 20px;' +
                'margin-top: 20px;' +
            '}' +
            '.ipsTag {' +
                'background: url("http://i55.servimg.com/u/f55/18/17/62/92/tag_bg10.png") repeat scroll 0 0 rgba(0, 0, 0, 0);' +
                'border-radius: 0 3px 3px 0;' +
                'color: #FFFFFF !important;' +
                'display: inline-block;' +
                'font-size: 11px;' +
                'height: 20px;' +
                'line-height: 20px;' +
                'margin: 5px 5px 0 0;' +
                'padding: 0 7px 0 15px;' +
                'text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);' +
            '}' +
            '</style>',
        sTarget: ''
    };
   
    jQuery(oConfig.sCSS).insertBefore('body');

    /* Forum versions! */
    var phpBB2 = jQuery('.bodyline');
    var phpBB3 = jQuery('#wrap');
    var punbb = jQuery('#pun-intro');
    var invision = jQuery('#ipbwrapper');
   
    if (phpBB2.length) {
        $('td.nav').parent().parent().parent().before(oConfig.sInfo + oConfig.sContent);
        oConfig.sTarget = 'h1.cattitle:first';
    } else if(phpBB3.length) {
        $('#main-content .post:first').before(oConfig.sInfo + oConfig.sContent);
        oConfig.sTarget = 'h1.page-title';
    } else if(punbb.length) {
        $('#main-content .main.paged').before(oConfig.sInfo + oConfig.sContent);
        oConfig.sTarget = 'p.crumbs strong:last';
    } else if(invision.length) {
        $('#main-content .borderwrap:first').before(oConfig.sInfo + oConfig.sContent);
        oConfig.sTarget = 'div.maintitle.floated h3';
    };

    var tags = jQuery(oConfig.sTarget).text().split(' ');

    jQuery.each(tags, function(index, data) {
        if(data.length > iTagLength) {
            $('#tags_search').append(
                '<a id="tag_search_' + index + '" class="ipsTag" title="' + sTagToolTip + ' ' + data + '" href="/search?search_keywords=' + data + '">' +
                '    <span>' + data + '</span>' +
                '</a>'
            );
        }
    });
});

• Poderá definir o tamanho das palavras que farão parte das tags, para isso basta definir no código acima o valor da variável iTagLength, exemplo:
  Digamos que deseje mostrar palavras com até 5 caracteres, basta colocar o valor 5 na variável, ficando assim:
  var iTagLength = 5;
  
  
• Para trocar o título que precede as tags, basta editar a variável sTagTitle com o valor que desejar, exemplo: var sTagTitle = 'Buscar por:';
  
  
• Para trocar a dica (ToolTip) que aparece ao colocar o mouse em cima das tags, basta editar a variável sTagToolTip com o valor que desejar, exemplo: var sTagToolTip = 'Localizar mais conteúdo com a tag';

2º - Noção básica da função:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>

Título Correspondente ao nome da página JavaScript/jQuery que será criada.

Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.

Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.

Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

• Resultado:
  
  

---

© Fórum dos Fóruns & JScript

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Busca com TAGs nos tópicos