Argomenti simili proposti in "Cerca" anche sulle altre versioni forum


Tutorial Argomenti simili proposti in "Cerca" anche sulle altre versioni forum

Messaggio Da Niko Sab 3 Apr 2021 - 21:06

Argomenti simili proposti in "Cerca" anche sulle altre versioni forum


Definizione

Avete scoperto l'ultima novità che abbiamo inserito nella versione AwesomeBB? I risultati della ricerca vengono proposti in base alla ricerca dell'utente, ma succede solo per questa specifica versione di forum.

Grazie a questo tutorial potrete implementare questa funzione anche sulle altre versioni dei forum Forumattivo!

Argomenti simili proposti in "Cerca" anche sulle altre versioni forum Ex9aqn10

Codice Javascript

Andiamo verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice Javascript, assicuriamoci che la gestione dei codici Javascript sia attivata - e creiamone uno nuovo con queste impostazioni:
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    $(function () {
    var max_results_count  = 6;
        var searchTypingTimer;
        var searchDoneTypingInterval = 750;
        var $input = $("div#search_menu form[action=/search] input[name=search_keywords]");
        var $results = $("#search_results_ajx");
        $input.attr("autocomplete", "off");
        var div_results = $("<div />");
        div_results.attr("id", "search_results_ajx").appendTo("div#search_menu");
    $('#search_results_ajx').before('<hr class="dashed">');
        $results.hide();
        $(document).mouseup(function (e) {
            var container = $("#search_results_ajx");
            if (!container.is(e.target) && container.has(e.target).length === 0) {
                container.hide();
            }
        });
        $input.on("click", function () {
            if ($(this).val().length > 3) {
                $results.show();
            }
        });
        $input.on("keyup", function () {
            clearTimeout(searchTypingTimer);
            searchTypingTimer = setTimeout(searchDoneTyping, searchDoneTypingInterval);
        });
        $input.on("keydown", function () {
            clearTimeout(searchTypingTimer);
        });
        function highlightElements(needles, text) {
            var needlesArray = needles.split(/(\s+)/);
            var needles_str = "";
            for (var needle in needlesArray) {
                needles_str = needles_str + (needles_str.length > 0 ? "|" : "") + needlesArray[needle];
            }
            var searchMask = "(" + needles_str + ")(?:s?)";
            var regEx = new RegExp(searchMask, "ig");
            var replaceMask = '<span style="color:#1E88E5" class="coloradmin"><b>$1</b></span>';
            var result = text.replace(regEx, replaceMask);
            return result;
        }
        function searchDoneTyping() {
            var inputval = $input.val();
            if (inputval.length > 3) {
                $.ajax({
                    url: "/search",
                    data: { search_keywords: inputval, json_result: 1, count: max_results_count },
                    success: function (data) {
                        div_results.html("");
                        try {
                            var data_list = JSON.parse(data);
                        } catch (e) {
                            return;
                        }
                        var div_lang_results = $("<div />");
                        div_lang_results.attr("id", "search_results_ajx_header");
                        div_lang_results.html(data_list.l_search_results).appendTo(div_results);
                        if (data_list.error.length === 0) {
                            for (var result in data_list.results) {
                                var title = data_list.results[result].topic_title;
                                if (title === null) continue;
                                var forum_str = data_list.results[result].forum_link;
                                title = highlightElements(inputval, title);
                                var item_div = $("<div />");
                                item_div.attr("class", "search_results_ajx_item");
                                var result_link = $("<a />");
                                result_link.attr("href", data_list.results[result].topic_url);
                                result_link.attr("class", "search_results_ajx_link");
                                result_link.html(title);
                                var result_forum = $("<p />");
                                result_forum.attr("class", "search_results_ajx_link_forum");
                                result_forum.html(forum_str);
                                result_link.appendTo(item_div);
                                result_forum.appendTo(item_div);
                                item_div.appendTo(div_results);
                            }
                            if (data_list.l_more_results !== null) {
                                var div_lang_more = $("<div />");
                                div_lang_more.attr("id", "search_results_ajx_footer");
                                var more_link = $("<a />");
                                more_link.attr("href", "/search?search_keywords=" + inputval);
                                more_link.attr("class", "search_results_ajx_link");
                                more_link.html(data_list.l_more_results);
                                more_link.appendTo(div_lang_more);
                                div_lang_more.appendTo(div_results);
                            }
                        } else {
                            var result_elem = $("<div />");
                            result_elem.attr("class", "search_results_ajx_item_error");
                            result_elem.text(data_list.error);
                            result_elem.appendTo(div_results);
                            var div_lang_advanced = $("<div />");
                            div_lang_advanced.attr("id", "search_results_ajx_footer");
                            var advanced_link = $("<a />");
                            advanced_link.attr("href", "/search");
                            advanced_link.attr("class", "search_results_ajx_link");
                            advanced_link.html(data_list.l_advanced_search);
                            advanced_link.appendTo(div_lang_advanced);
                            div_lang_advanced.appendTo(div_results);
                        }
                    },
                });
                $("#search_results_ajx").show();
            } else {
                $("#search_results_ajx").hide();
            }
        }
    });


Il foglio di stile CSS

Ora andiamo verso Pannello di amministrazione ► Visualizzazione ► Immagini e colori ► Foglio di stile CSS e aggiungiamo questo codice, quindi salviamo.
Codice:
#search_results_ajx #search_results_ajx_header{border-bottom:1px solid #fefefe;font-size:15px;height:35px;line-height:35px;margin:0 10% 5px;padding-bottom:7px;text-align:center;width:80%}#search_results_ajx #search_results_ajx_footer{font-size:13px; color: 263238; height:30px;line-height:30px;text-align:center}#search_results_ajx .search_results_ajx_link, #search_results_ajx .search_results_ajx_link a {
    color: #333333;
    font-size: 12px;
    line-height: 17px;
}#search_results_ajx .search_results_ajx_item, #search_results_ajx .search_results_ajx_item_error {
    border-bottom: 1px solid #ccc;
    padding-top: 10px;
}#search_results_ajx .search_results_ajx_link_forum,#search_results_ajx .search_results_ajx_link_forum a{color:#bdbdbd;line-height:15px;margin-top:3px}#search_results_ajx #search_results_ajx_footer:hover,#search_results_ajx .search_results_ajx_item:hover{background-color:#FFFFFF22; color: white; }#search_results_ajx .search_results_ajx_item_error,#search_results_ajx .search_results_ajx_item_error:hover{color:#1E272C;font-style:italic;padding:15px;text-align:center}
a.search_results_ajx_link span b {
    background: #1d1d1b;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
}

Il codice è interamente personalizzabile secondo lo stile del proprio forum :good:

Ad esempio:
  • a.search_results_ajx_link span b è il selettore CSS che fa riferimento ai termini di ricerca trovati nei titoli dei topic in anteprima


Personalizzazione

Potete modificare nel codice Javascript:
  • var max_results_count = 6; - il valore indica il numero di messaggi proposti come risultato in anteprima



Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 24
Messaggi : 8279
Località : Provincia di Varese

Visualizza il profilo https://www.openstudio.one

A MattiaDes e pedxz piace questo messaggio.

Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto


 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.