Créer une rechercher automatique des membres

[Mikki]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Internet Explorer
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

Je débute dans la création de forum et il y a une chose que j'aimerais voir sur mon forum. C'est une astuce qui consiste quand on note un "@" dans un message, une liste des membres apparait. Comme pour rechercher un membre plus facilement.

Par exemple, je recherche un personnage qui s'appel "Hannah". Dans un message j'écris @H et une liste des membres ayant un H en première lettre s'affiche. Cela me permet de le "taguer" facilement.

Actuellement j'ai l'option "@" dans la barre avec le "gras, italique, souligner, centrer..." mais j'aimerais aussi cette astuce.

Actuelle j'ai ceci : capture 01
J'aimerais aussi pouvoir faire ceci : capture 02

Et est-il possible que ce "@" soit aussi accessible sur les réponses rapides ?

Je ne sais pas trop si y'a une option à activer quelques part, un javascript à créer... je suis un peu perdu.

Si besoin, voici mon viewbody qui est modifier pour différente chose :

Code:

<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
    //<![CDATA[
    var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">
    var hiddenMsgLabel = { visible: '{JS_HIDE_HIDDEN_MESSAGE}', hidden: '{JS_SHOW_HIDDEN_MESSAGE}' };
    showHiddenMessage = function (id) {
        try {
            var regId = parseInt(id, 10);
            if (isNaN(regId)) { regId = 0; }
            if (regId > 0) {
                $('.post--' + id).toggle(0, function () {
                    if ($(this).is(":visible")) {
                        $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
                    }
                    else {
                        $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
                    }
                });
            }
        }
        catch (e) { }
        return false;
    };
    //]]>
</script>
<!-- BEGIN switch_push_direct_send -->
<div id="push-answer" class="jqmWindow"></div>
<script src="{JQUERY_DIR}jqmodal/jqmodal.js" type="text/javascript"></script>
<script>
    //<![CDATA[
    $(document).ready(function () {
        $('#push-answer').jqm({ toTop: true });
        $('#push-bell').click(function () {
            return sendWebPush({ TOPIC_ID });
        });
        function sendWebPush(tId) {
            $.get("/ajax_push.php?topicID=" + tId).done(showPushAnswer);
       }
        function showPushAnswer(data) {
            $('#push-answer').html(data).jqmShow();
            $('.jqmOverlay').bgiframe();
            $('#push-answer').bgiframe();
        }
    });
    //]]>
</script>
<!-- END switch_push_direct_send -->
<table width="100%" border="0" cellspacing="2" cellpadding="0">
    <tr>
        <td align="left" valign="middle" nowrap="nowrap">
            <span class="nav">
                <!-- BEGIN switch_user_authpost -->
                <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;
                <!-- END switch_user_authpost -->
                <!-- BEGIN switch_user_authreply -->
                <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
               <!-- END switch_user_authreply -->
            </span>
        </td>
        <td class="nav" valign="middle" width="100%">
            <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}
            </span>
        </td>
        <td align="right" valign="bottom" nowrap="nowrap" width="100%">
            <span class="gensmall bold">
                <!-- BEGIN switch_plus_menu -->
                &nbsp;
                <div id="addthis-toolbar" style="display: inline-block;">
                    <div class="btn-floating-left" tabindex="100">
                        {L_SHARE}
                    </div>
                    <div class="addthis-toolbar-btn" style="display:none;">
                        {switch_plus_menu.SOCIAL_BUTTONS}
                    </div>
                </div>
                &nbsp;|&nbsp;
                <script type="text/javascript">//<![CDATA[

                    var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';

                    var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';

                    var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';

                    var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';

                    var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';

                    insert_plus_menu('f{FORUM_ID}&amp;t={TOPIC_ID}', '{JS_SESSION_ID}', { JS_AUTH_FAVOURITES });
                    //]]>
                </script>
                {switch_plus_menu.JS_SOCIAL_BUTTONS}
                <!-- END switch_plus_menu -->
            </span>
        </td>
    </tr>
</table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
    <tr align="right">
        <td class="catHead" colspan="2" height="28">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="9%" class="noprint">&nbsp;</td>
                    <td align="center" class="t-title">
                        <h1 class="cattitle">&nbsp;{TOPIC_TITLE}<!-- BEGIN switch_push_direct_send -->&nbsp;<span id="push-bell" title="{switch_push_direct_send.L_PUSH_SEND}"></span><!-- END switch_push_direct_send --></h1>
                    </td>
                    <td align="right" width="9%" class="browse-arrows">
                        <!-- BEGIN switch_isconnect -->
                        <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;
                        <!-- END switch_isconnect -->
                        <a href="#bottom">{L_GOTO_DOWN}</a>&nbsp;
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td class="row1" colspan="2"><span class="gensmall">{POSTERS_LIST}</span></td>
    </tr>
    <!-- BEGIN topicpagination -->
    <tr>
        <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
    </tr>
    <!-- END topicpagination -->
    {POLL_DISPLAY}
    <tr>
        <th class="thRight" nowrap="nowrap">{L_MESSAGE}</th>
        <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
    </tr>
    <!-- BEGIN postrow -->
    <!-- BEGIN hidden -->
    <tr>
        <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
    </tr>
    <!-- END hidden -->
    <!-- BEGIN displayed -->
    <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
        <td class="{postrow.displayed.ROW_CLASS}" {postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="100%">
            <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}&nbsp; &nbsp;<img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
                    <td valign="top" nowrap="nowrap" class="post-options">
                        {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} <a href="{postrow.displayed.POST_URL}"title="Clique droit pour copier le lien de ce message"><img src="https://i.postimg.cc/3xyqWdJF/image.png"/></a>{postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG}  {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="hr">
                        <hr />
                    </td>
                </tr>
                <tr height="100%" valign="top">
                    <td colspan="2">

                        <!-- BEGIN switch_vote_active -->

                        <div class="vote gensmall">

                            <!-- BEGIN switch_vote -->

                            <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>

                            <!-- END switch_vote -->



                            <!-- BEGIN switch_bar -->

                            <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">

                                <!-- BEGIN switch_vote_plus -->

                                <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>

                                <!-- END switch_vote_plus -->

                                <!-- BEGIN switch_vote_minus -->

                                <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>

                                <!-- END switch_vote_minus -->

                            </div>

                            <!-- END switch_bar -->



                            <!-- BEGIN switch_no_bar -->

                            <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div> <!-- END switch_no_bar -->

                            <!-- BEGIN switch_vote -->

                            <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>

                            <!-- END switch_vote -->

                        </div>

                        <!-- END switch_vote_active -->



                        <div class="postbody">

                            <div>{postrow.displayed.MESSAGE}</div>

                            <!-- BEGIN switch_attachments -->

                            <dl class="attachbox">

                                <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>

                                <dd>

                                    <!-- BEGIN switch_post_attachments -->

                                    <dl class="file">

                                        <dt>

                                            <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                            <!-- BEGIN switch_dl_att -->

                                            <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}

                                            <!-- END switch_dl_att -->


                                            <!-- BEGIN switch_no_dl_att -->

                                            {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}

                                            <!-- END switch_no_dl_att -->

                                        </dt>

                                        <!-- BEGIN switch_no_comment -->

                                        <dd>

                                            <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>

                                        </dd>

                                        <!-- END switch_no_comment -->

                                        <!-- BEGIN switch_no_dl_att -->

                                        <dd>


                                            <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>

                                        </dd>

                                        <!-- END switch_no_dl_att -->

                                        <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>

                                    </dl>

                                    <!-- END switch_post_attachments -->

                                </dd>

                            </dl>

                            <!-- END switch_attachments -->

                            <div class="clear"></div>

                            <!-- BEGIN switch_signature -->

                            <div class="signature_div">

                                {postrow.displayed.SIGNATURE}

                            </div>

                            <!-- END switch_signature -->

                        </div>

                        <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>

                    </td>



                </tr>

                <!-- BEGIN switch_likes_active -->



                <tr>
                    <td colspan="2">

                        <div class="fa_like_div">



                            <!-- BEGIN switch_like_list -->



                            {postrow.displayed.switch_likes_active.switch_like_list.D_LIKE_LIST}

                            <!-- END switch_like_list -->

                            <!-- BEGIN switch_dislike_list -->



                            {postrow.displayed.switch_likes_active.switch_dislike_list.D_DISLIKE_LIST}

                            <!-- END switch_dislike_list -->

                            <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}" data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">

                                <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M320 1344q0-26-19-45t-45-19q-27 0-45.5 19t-18.5 45q0 27 18.5 45.5t45.5 18.5q26 0 45-18.5t19-45.5zm160-512v640q0 26-19 45t-45 19h-288q-26 0-45-19t-19-45v-640q0-26 19-45t45-19h288q26 0 45 19t19 45zm1184 0q0 86-55 149 15 44 15 76 3 76-43 137 17 56 0 117-15 57-54 94 9 112-49 181-64 76-197 78h-129q-66 0-144-15.5t-121.5-29-120.5-39.5q-123-43-158-44-26-1-45-19.5t-19-44.5v-641q0-25 18-43.5t43-20.5q24-2 76-59t101-121q68-87 101-120 18-18 31-48t17.5-48.5 13.5-60.5q7-39 12.5-61t19.5-52 34-50q19-19 45-19 46 0 82.5 10.5t60 26 40 40.5 24 45 12 50 5 45 .5 39q0 38-9.5 76t-19 60-27.5 56q-3 6-10 18t-11 22-8 24h277q78 0 135 57t57 135z" fill="#666"></path>
                                </svg>

                                <span>{postrow.displayed.switch_likes_active.L_LIKE}</span>{postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}



                            </button>

                            <!-- BEGIN switch_dislike_button -->

                            <button class="rep-button {postrow.displayed.switch_likes_active.switch_dislike_button.C_VOTE_DISLIKE}" data-href="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_DISLIKE}" data-href-rm="{postrow.displayed.switch_likes_active.switch_dislike_button.U_VOTE_RM_LIKE}">

                                <svg width="15px" height="15px" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M320 576q0 26-19 45t-45 19q-27 0-45.5-19t-18.5-45q0-27 18.5-45.5t45.5-18.5q26 0 45 18.5t19 45.5zm160 512v-640q0-26-19-45t-45-19h-288q-26 0-45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45-19t19-45zm1129-149q55 61 55 149-1 78-57.5 135t-134.5 57h-277q4 14 8 24t11 22 10 18q18 37 27 57t19 58.5 10 76.5q0 24-.5 39t-5 45-12 50-24 45-40 40.5-60 26-82.5 10.5q-26 0-45-19-20-20-34-50t-19.5-52-12.5-61q-9-42-13.5-60.5t-17.5-48.5-31-48q-33-33-101-120-49-64-101-121t-76-59q-25-2-43-20.5t-18-43.5v-641q0-26 19-44.5t45-19.5q35-1 158-44 77-26 120.5-39.5t121.5-29 144-15.5h129q133 2 197 78 58 69 49 181 39 37 54 94 17 61 0 117 46 61 43 137 0 32-15 76z" fill="#666"></path>
                                </svg>

                                <span>{postrow.displayed.switch_likes_active.switch_dislike_button.L_DISLIKE}</span>{postrow.displayed.switch_likes_active.switch_dislike_button.COUNT_VOTE_DISLIKE} </button>

                            <!-- END switch_dislike_button -->

                        </div>
                    </td>
                </tr>

                <!-- END switch_likes_active -->

            </table>

        </td>
        <td class="{postrow.displayed.ROW_CLASS}" {postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
          <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><div class="namePOST"><strong>{postrow.displayed.POSTER_NAME}</strong></div></span><br />
            <span class="postdetails poster-profile">

                {postrow.displayed.POSTER_RANK}
                {postrow.displayed.RANK_IMAGE} <br />
                <div class="avatar_cadre">{postrow.displayed.POSTER_AVATAR} </div> <br /><br />
                <div class="systab">
                    <div class="selected">
                        <span>VISA CARD</span>
                         <div class="scroller"><span class="profil"> <!-- BEGIN profile_field -->
                            <div class="infos-posteur">
                                <span class="profil_label"> <!-- Champs du profil  --> {postrow.displayed.profile_field.LABEL}</span>
                                <!-- Contenu/réponses aux champs --> {postrow.displayed.profile_field.CONTENT}
                                {postrow.displayed.profile_field.SEPARATOR}
                            </div> <!-- END profile_field -->
                        </span></div>
                    </div>
                    <div>
                         <span>MORE ABOUT ME</span>
                       <div class="scroller"><div class="rpg"><!-- Feuille de personnage -->{postrow.displayed.POSTER_RPG}</div>
                    </div></div>
                    <div>
                    </div>
                </div>
            </span><br />
            <img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" />
        </td>

    </tr>

    <tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">


        <td class="{postrow.displayed.ROW_CLASS} messaging gensmall" {postrow.displayed.THANK_BGCOLOR} width="100%" height="28">

            <table border="0" cellspacing="0" cellpadding="0">

                <tr>

                    <td valign="middle">

                        {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}

                    </td>

                </tr>

            </table>

        </td>
        <td class="{postrow.displayed.ROW_CLASS} browse-arrows" {postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">

            <a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>

        </td>

    </tr>

    <!-- BEGIN first_post_br -->

</table>

<hr />

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

    <tr>

        <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>

        <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>

    </tr>

    <!-- END first_post_br -->

    <!-- END displayed -->

    <!-- END postrow -->

    <!-- BEGIN no_post -->

    <tr align="center">

        <td class="row1" colspan="2" height="28">

            <span class="genmed">{no_post.L_NO_POST}</span>

        </td>

    </tr>

    <!-- END no_post -->

    <tr align="right">

        <td class="catBottom" colspan="2" height="28">

            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>

                    <td width="9%" class="noprint">&nbsp;</td>

                    <td align="center" class="t-title"><a name="bottomtitle"></a>
                        <div class="cattitle">{TOPIC_TITLE}</div>
                    </td>

                    <td align="right" nowrap="nowrap" width="9%" class="browse-arrows">

                        <!-- BEGIN switch_isconnect -->

                        <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;

                        <!-- END switch_isconnect -->

                        <a href="#top">{L_BACK_TO_TOP}</a>&nbsp;

                    </td>

                </tr>

            </table>

        </td>

    </tr>

</table>

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">

    <tr>

        <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>

        <!-- BEGIN topicpagination -->

        <td class="row1" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>

        <!-- END topicpagination -->

    </tr>

    <!-- BEGIN switch_user_logged_in -->

    <!-- BEGIN watchtopic -->

    <tr>

        <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>

    </tr>

    <!-- END watchtopic -->

    <!-- END switch_user_logged_in -->

</table>

<!-- BEGIN promot_trafic -->

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">

    <tr>

        <td class="catBottom" height="28">

            <table width="100%" border="0" cellspacing="0" cellpadding="0">

                <tr>



                    <td valign="top">
                        <div class="cattitle">&nbsp;{PROMOT_TRAFIC_TITLE}</div>
                    </td>

                    <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>

                </tr>

            </table>

        </td>

    </tr>

</table>









<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">

    <tr>

        <td class="catBottom" height="28">

            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>

                    <td valign="top">
                        <div class="cattitle">&nbsp;{PROMOT_TRAFIC_TITLE}</div>
                    </td>



                    <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>

                </tr>

            </table>

        </td>

    </tr>

    <tr>

        <td class="row2 postbody" valign="top">



            <!-- BEGIN link -->

            &raquo;&nbsp;<a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" title="{promot_trafic.link.TITLE}">{promot_trafic.link.TITLE}</a><br />

            <!-- END link -->

        </td>

    </tr>

</table>

<!-- END promot_trafic -->





<!-- BEGIN switch_forum_rules -->

<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">

    <tbody>

        <tr>

            <td class="catBottom">

                <table width="100%" border="0" cellspacing="0" cellpadding="0">



                    <tbody>

                        <tr>

                            <td valign="top">

                                <div class="cattitle">&nbsp;{L_FORUM_RULES}</div>

                            </td>

                        </tr>

                    </tbody>

                </table>

            </td>

        </tr>

        <tr>

            <td class="row1 clearfix">

                <table>

                    <tr>

                        <!-- BEGIN switch_forum_rule_image -->
                        <td class="logo">

                            <img src="{RULE_IMG_URL}" alt="" />

                        </td>

                        <!-- END switch_forum_rule_image -->

                        <td class="rules postbody">

                            {RULE_MSG}

                        </td>

                    </tr>

                </table>

            </td>

        </tr>

    </tbody>

</table>

<!-- END switch_forum_rules -->

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">

    <tr>

        <td class="row2" colspan="2" align="center" style="padding:0px">

            <!-- BEGIN switch_user_logged_in -->

            <a name="quickreply"></a>

            {QUICK_REPLY_FORM}<br />

            <!-- END switch_user_logged_in -->

        </td>

    </tr>

    <tr>

        <td style="margin:0; padding: 0;" colspan="2">

            <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">

                <tbody>

                    <!-- BEGIN show_permissions -->

                    <tr>

                        <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>

                        <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>

                    </tr>

                    <!-- END show_permissions -->

                    <tr>

                        <td class="catBottom" colspan="2" height="28">





                            <table width="100%" border="0" cellspacing="0" cellpadding="0">

                                <tr>

                                    <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>

                                    <!-- BEGIN show_permissions -->

                                    <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>

                                    <!-- END show_permissions -->

                                </tr>

                            </table>

                        </td>

                    </tr>

                </tbody>

            </table>

        </td>

    </tr>





    <tr>

        <td style="margin:0; padding: 0;" colspan="2">

            <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">

                <tbody>

                    <tr>

                        <td class="catBottom" colspan="2" height="28">

                            <table width="100%" border="0" cellspacing="0" cellpadding="0">





                                <tr>

                                    <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>

                                    <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>

                                </tr>

                            </table>

                        </td>

                    </tr>

                </tbody>

            </table>

        </td>

    </tr>

</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">

    <table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">

        <tr>

            <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>

                <span class="nav">

                    <!-- BEGIN switch_user_authpost -->

                    <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;

                    <!-- END switch_user_authpost -->

                    <!-- BEGIN switch_user_authreply -->

                    <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>

                    <!-- END switch_user_authreply -->

                </span>

            </td>

            <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}:&nbsp;{S_JUMPBOX_SELECT}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span></td>





            <!-- BEGIN moderation_panel -->

            <td align="center">

                <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>

            </td>

            <td align="center" width="250">

                <span class="gensmall">&nbsp;</span>

            </td>

            <!-- END moderation_panel -->

        </tr>

    </table>

</form>

<!-- BEGIN viewtopic_bottom -->

<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">

    <tr>

        <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />



            <form name="action" method="get" action="{S_FORM_MOD_ACTION}">

                <input type="hidden" name="t" value="{TOPIC_ID}" />



                <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->

                <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

                <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>

            </form>

        </td>

    </tr>

</table>

<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->

<script type="text/javascript">

    //<![CDATA[

    $(resize_images({ 'selector': '.postbody', 'max_width': { switch_image_resize.IMG_RESIZE_WIDTH }, 'max_height': { switch_image_resize.IMG_RESIZE_HEIGHT } }));

    //]]>

</script>

<!-- END switch_image_resize -->


Merci d'avance pour votre aide et vos explications.

[Milouze14]

Hello Mikki,

tu as cette astuce proposée par mon ami Ange Tuteur:

https://fmdesign.forumotion.com/t943-auto-suggest-mentions-as-you-type#19157

Avec les modifications dans ton template "viewtopic_body" ,il n'y a pas de conflit   .

Par contre, je doute du bon fonctionnement avec ton template memberlist_body:

Merci de le fournir stp .


a++

[Mikki]

Ah oui c'est exactement ce que je voulais !!! J'ai pourtant chercher sur internet, sur forumactif la partie astuce, mais je n'avais rien trouvé.

Par contre, effectivement ça coince avec mon templace "memberlist_body". Du coup, j'ai enregister mon template et supprimé pour voir. Et si je retire les modif de ce template, ça marche à merci.

Donc en attendant j'ai retirer les modifications du template.

Si jamais vous avez la solution, ça serait merveilleux car j'aimais la façon que j'avais la liste des membres. Sinon tant pis, ça restera classique. En attendant, voici le template sous code :

Code:

<form action="{S_MODE_ACTION}" method="get">
    <table cellspacing="0" cellpadding="5" border="0" align="center" class="tleLMBER">
    <tr>
    <th nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
    </tr>
    <tr>
    <td>
    <table cellspacing="0" cellpadding="0" border="0" align="center" class="genmed">
    <tr>
    <td width="100%" style="padding:5px 0;">{L_USER_SELECT} <input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />   
    {L_SELECT_SORT_METHOD} {S_MODE_SELECT}   
    {L_ORDER} {S_ORDER_SELECT}   
    {S_HIDDEN_SID}
    <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </form>
    <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr><td class="{memberrow.ROW_CLASS}" align="center">
 <!-- BEGIN memberrow -->
    <div id="LMBER"><div class="MBER"><a style="display:none;" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a><script type="text/javascript">//<![CDATA[
$( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color");
$(this).closest('.MBER').css("background-color", color);});}); $( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color");
$(this).closest('.boxLMBER').css("color", color);});});//]]></script><div class="imgLMBER"><div class="msgLMBER">{memberrow.POSTS}</div><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div>
<div class="boxLMBER"><div class="nameLMBER"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a><div class="joinLMBER">{memberrow.JOINED}</div></div><div class="lstvLMBER">{memberrow.LASTVISIT}</div><div class="btnLMBER">{memberrow.PM_IMG} {memberrow.WWW_IMG}</div></div>
    <!-- BEGIN switch_td_group -->
    <div style="display:none;">{memberrow.GROUPS}</div>
    <!-- END switch_td_group -->
    </div></div>
    <!-- END memberrow -->
    </td></tr>
    <!-- BEGIN switch_no_user -->
    <tr>
    <td colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
    </tr>
    <!-- END switch_no_user -->
    </table>
    <!-- BEGIN switch_pagination -->
    <table style="margin:auto; width:765px;" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><span class="nav">{PAGE_NUMBER}</span></td>
    <td align="right"><span class="nav">{PAGINATION}</span></td>
    </tr>
    </table>
    <br />
    <!-- END switch_pagination -->

Merci pour votre aide et votre aide futur si vous savez ou modifier ce template.

[Stefano123]

Bonjour Messieurs,

Mikki,

En dessous de votre template "memberlist_body" vous avez un lien "Voir le template par défaut" cliquez dessus qui vous ouvrira une autre fenêtre.
À ce moment-là, vous pourrez voir ce que vous avez modifié ou ajouté entre votre template et celle par défaut et pouvoir rectifier dans votre template en question !



Cordialement,

[Milouze14]

Hello Mikki et Stefano ,

Mikki, remplaces le script par celui-ci:

Code:



!window.fa_mentionner && !/\/privmsg|\/profile\?mode=editprofile&page_profil=signature/.test(window.location.href) && $(function(){$(function(){
          'SCEDITOR @HANDLE AUTO-SUGGEST';
          'DEVELOPED BY ANGE TUTEUR';
          'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
          'ORIGIN : http://fmdesign.forumotion.com/t943-auto-suggest-mentions-as-you-type#19157';
          var container = $('.sceditor-container')[0],
              text_editor = document.getElementById('text_editor_textarea'),
              frame,
              instance;
          if (container && text_editor) {
            frame = $('iframe', container);
            instance = $(text_editor).sceditor('instance');
            window.fa_mentionner = {
              suggest_delay : 100, // delay before suggestions show up (100ms)
              // language presets
              lang : {
                placeholder : 'Recherche...',
                not_found : 'Utilisateur non trouvé'
              },
              // colors of the suggestion popup
              color : {
                      font : '#333',
                hover_font : '#FFF',
                error_font : '#F00',
                      background : '#FFF',
                hover_background : '#69C',
                border : '#CCC',
                shadow : 'rgba(0, 0, 0, 0.176)'
              },
              // sceditor instance and rangeHelper
              instance : instance,
              rangeHelper : instance.getRangeHelper(),
              //  nodes for listening and modifications
              frame : frame[0],
              body : frame.contents().find('body')[0],
              textarea : $('textarea', container)[0],
              // faux textarea and suggestion list
              faux_textarea : $('<div id="faux_text_editor" />')[0], // helps us mirror the cursor position in source mode
              list : $('<div id="fa_mention_suggestions" style="position:absolute;" />')[0],
              // version specific selectors
              selectors : $('.bodyline')[0] ? ['#LMBER .MBER a:first', '#LMBER .imgLMBER a:first'] :
                          document.getElementById('ipbwrapper') ? ['.membername', '.mini-avatar'] :
                          null,
              // adjusts the scroll position of the faux textarea so the caret stays in line
              adjustScroll : function() {
                fa_mentionner.faux_textarea.scrollTop = fa_mentionner.textarea.scrollTop;
              },
              // updates the content in the faux textarea
              updateFauxTextarea : function(active, key) {
                if (key == 16) { // 16 = SHIFT
                  return; // return when specific keys are pressed
                }
                // clear suggestion queue when suggestions aren't active
                if (active != true) {
                  fa_mentionner.clearSuggestions();
                } else {
                  return; // return when interactive keys are pressed while suggesting ; up, down, enter
                }
                // use another method if in WYSIWYG mode
                if (!fa_mentionner.instance.inSourceMode()) {
                  key != 32 ? fa_mentionner.searchWYSIWYG() : fa_mentionner.clearSuggestions();
                  return;
                }
                var val = fa_mentionner.instance.val(),
                    range = 0,
                    selection,
                    faux_caret,
                    username;
                // get the position of the caret
                if (document.selection) {
                  selection = document.selection.createRange();
                  selection.moveStart('character', -fa_mentionner.textarea.length);
                  range = selection.text.length;
                } else if (fa_mentionner.textarea.selectionStart || fa_mentionner.textarea.selectionStart == 0) {
                  range = fa_mentionner.textarea.selectionStart;
                }
                // set the position of the caret
                val = val.slice(0, range) + '{FAUX_CARET}' + val.slice(range, val.length);
                // parse and sanitize the faux textarea content
                $(fa_mentionner.faux_textarea).html(
                  val.replace(/</g, '<')
                    .replace(/>/g, '>')
                    .replace(/@"(.*?)"|@(.*?)(?:\s|\r|\n|$)/g, function(M, $1, $2) {
                      var lastChar = M.substr(-1),
                          name = ($1 || $2 || '').replace(/\{FAUX_CARET\}|"/g, '');
                      return '<a href="#' + name + '">' + (/\s|\r|\n/.test(M) ? M.slice(0, M.length - 1) + '</a>' + lastChar : M + '</a>');
                    })
                    .replace(/\{FAUX_CARET\}/, '<span id="faux_caret" style="position:absolute;margin-left:-3px;">|</span>')
                );
                faux_caret = document.getElementById('faux_caret');
                // mentions are parsed as <a>nchors, so when the faux caret is inside one we'll show some suggestions
                if (faux_caret && faux_caret.parentNode.tagName == 'A') {
                  fa_mentionner.value = val;
                  fa_mentionner.delay = window.setTimeout(function() {
                    fa_mentionner.suggest(faux_caret.parentNode.href.replace(/.*?#(.*)/, '$1'), $(faux_caret).offset());
                  }, fa_mentionner.suggest_delay);
                }
                fa_mentionner.adjustScroll();
              },
              // search for active mentions in wysiwyg mode
              searchWYSIWYG : function() {
                var selected = fa_mentionner.rangeHelper.cloneSelected(),
                    mentions = selected.startContainer.data && selected.startContainer.data.match(/(@".*?")|(@.*?)(?:\s|\r|\n|$)/g),
                    offset,
                    offset_marker,
                    hit,
                    i;
                    console.log(mentions);
                if (mentions && mentions[0]) {
                  // clean up whitespace
                  for (i in mentions) {
                    mentions[i] = mentions[i].replace(/\s$/g, '');
                  }
                  // search for the mention that's currently being modified
                  for (i in mentions) {
                    if (!fa_mentionner.wysiwyg_mentions || (mentions[i] != fa_mentionner.wysiwyg_mentions[i])) {
                      hit = true;
                      fa_mentionner.delay = window.setTimeout(function() {
                        fa_mentionner.rangeHelper.insertMarkers(); // insert markers to help get the caret offset
                        offset = $(fa_mentionner.frame).offset();
                        offset_marker = $('#sceditor-end-marker', fa_mentionner.body).show().offset();
                        // add the marker offsets to the iframe offsets
                        offset.left += offset_marker.left;
                        offset.top += offset_marker.top - fa_mentionner.body.scrollTop;
                        fa_mentionner.suggest(mentions[i].slice(1).replace(/^"|"$/g, ''), offset, true);
                        fa_mentionner.wysiwyg_active = mentions[i]; // save the active mention for later use in finish()
                      }, fa_mentionner.suggest_delay);
                      break;
                    }
                  }
                  // hide the suggestion list if there's no newly modified mentions
                  if (!hit) {
                    fa_mentionner.list.style.display = 'none';
                    fa_mentionner.focused = null;
                  }
                  fa_mentionner.wysiwyg_mentions = mentions; // update the list of mentions
                }
              },
              // suggest a list of users based on the passed username
              suggest : function(username, offset, wysiwyg) {
                // insert the suggestion list to show that it's searching
                fa_mentionner.list.innerHTML = '<span class="fam-info">' + fa_mentionner.lang.placeholder + '</span>';
                $(fa_mentionner.list).css({
                  left : offset.left + 'px',
                  top : offset.top + 'px',
                  display : 'block',
                  overflowY : 'auto'
                });
                document.body.appendChild(fa_mentionner.list);
                // send a query request to the memeberlist to find users who match the typed username
                fa_mentionner.request = $.get('/memberlist?username=' + username, function(d) {
                  fa_mentionner.request = null;
                  var suggestion = $(fa_mentionner.selectors ? fa_mentionner.selectors[0] : '.avatar-mini a', d),
                      ava = fa_mentionner.selectors ? $(fa_mentionner.selectors[1], d) : null,
                      i = 0,
                      j = suggestion.length,
                      name;
                  fa_mentionner.list.innerHTML = '';
                  if (j) {
                    for (; i < j; i++) {
                      name = $(suggestion[i]).text().replace(/^\s+|\s+$/g, '');
                      fa_mentionner.list.insertAdjacentHTML('beforeend',
                        '<a href="javascript:fa_mentionner.finish(\'' + name.replace(/'/g, '\\\'') + '\', ' + wysiwyg + ');" class="fa_mention_suggestion">'+
                          '<img class="fa_suggested_avatar" src="' + $(fa_mentionner.selectors ? ava[i] : suggestion[i]).find('img').attr('src') + '"/>'+
                          '<span class="fa_suggested_name">' + name + '</span>'+
                        '</a>'
                      );
                    }
                    // change overflowY property when it exceeds 7 suggestions -- prevents unsightly scroll bug
                    fa_mentionner.list.style.overflowY = j > 7 ? 'scroll' : 'auto';
                    // update the focused suggestion and scroll it into view
                    fa_mentionner.list.firstChild.className += ' fam-focus';
                    fa_mentionner.focused = fa_mentionner.list.firstChild;
                    fa_mentionner.scrollSuggestions();
                  } else {
                    fa_mentionner.list.innerHTML = '<span class="fam-info" style="color:' + fa_mentionner.color.error_font + ';">' + fa_mentionner.lang.not_found + '</span>';
                  }
                });
              },
              // kill the suggestion timeout while typing persists
              clearSuggestions : function() {
                if (fa_mentionner.delay) {
                  window.clearTimeout(fa_mentionner.delay);
                  fa_mentionner.delay = null;
                  fa_mentionner.list.style.display = 'none';
                  fa_mentionner.focused = null;
                }
                if (fa_mentionner.request) {
                  fa_mentionner.request.abort();
                  fa_mentionner.request = null;
                }
              },
              // finish the username
              finish : function(username, wysiwyg) {
                var mention, index, i;
                // hide and clear suggestions
                fa_mentionner.clearSuggestions();
                fa_mentionner.focused = null;
                fa_mentionner.list.style.display = 'none';
                if (!wysiwyg) {
                  fa_mentionner.value = fa_mentionner.value.replace(/(?:@".[^"]*?\{FAUX_CARET\}.*?"|@\{FAUX_CARET\}.*?(\s|\n|\r|$)|@.[^"\s]*?\{FAUX_CARET\}.*?(\s|\n|\r|$))/, function(M, $1, $2) {
                    mention = '@"' + username + '"';
                    return '{MENTION_POSITION}' + ( $1 ? $1 : $2 ? $2 : '' );
                  });
                  // get the index where the mention should be
                  index = fa_mentionner.value.indexOf('{MENTION_POSITION}');
                  fa_mentionner.value = fa_mentionner.value.replace('{MENTION_POSITION}', '');
                  // save current scroll position for application after the value has been updated
                  fa_mentionner.scrollIndex = fa_mentionner.textarea.scrollTop;
                  // update the textarea with the completed mention
                  fa_mentionner.instance.val('');
                  fa_mentionner.instance.insert(fa_mentionner.value.slice(0, index) + mention, fa_mentionner.value.slice(index, fa_mentionner.value.length));
                  // restore the scroll position for the textareas
                  fa_mentionner.textarea.scrollTop = fa_mentionner.scrollIndex;
                  fa_mentionner.adjustScroll();
                  // update the fake textarea
                  fa_mentionner.updateFauxTextarea();
                } else {
                  // save the caret range in WYSIWYG so we can restore it after replacing the HTML
                  fa_mentionner.rangeHelper.saveRange();
                  fa_mentionner.body.innerHTML = fa_mentionner.body.innerHTML.replace(new RegExp(fa_mentionner.wysiwyg_active.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + '(<span.*?id="sceditor-end-marker".*?>)'), '@"' + username + '"$1');
                  fa_mentionner.body.focus();
                  fa_mentionner.rangeHelper.restoreRange();
                  // update the wysiwyg mention array so no new suggestions appear
                  for (i in fa_mentionner.wysiwyg_mentions) {
                    if (fa_mentionner.wysiwyg_mentions[i] == fa_mentionner.wysiwyg_active) {
                      fa_mentionner.wysiwyg_mentions[i] = '@"' + username + '"';
                      break;
                    }
                  }
                }
              },
              // scroll the selected suggestion into view
              scrollSuggestions : function() {
                $(fa_mentionner.list).scrollTop(
                  (
                    $(fa_mentionner.focused).offset().top -
                    $(fa_mentionner.list).offset().top +
                    $(fa_mentionner.list).scrollTop()
                  ) -
                  (26 * 3) // 26 = the height of the suggestions, so display 3 suggestions above while scrolling
                );
              }
            };
            // get computed styles for the textarea and apply them to the faux textarea
            for (var css = window.getComputedStyle(fa_mentionner.textarea, null), i = 0, j = css.length, str = ''; i < j; i++) {
              str += css[i] + ':'  + css.getPropertyValue(css[i]) + ';';
            }
            // add styles to the head
            $('head').append('<style type="text/css">'+
              '#faux_text_editor {' + str + '}'+
              '#faux_text_editor { position:absolute; left:0; bottom:0; z-index:-1; visibility:hidden; display:block; overflow-y:auto; }'+
              '#fa_mention_suggestions { color:' + fa_mentionner.color.font + '; font-size:10px; font-family:arial, verdana, sans-serif; background:' + fa_mentionner.color.background + '; border:1px solid ' + fa_mentionner.color.border + '; margin-top:20px; z-index:999; max-height:182px; overflow-x:hidden; box-shadow:0 6px 12px ' + fa_mentionner.color.shadow + '; }'+
              'a.fa_mention_suggestion, .fam-info { color:' + fa_mentionner.color.font + '; height:26px; line-height:26px; padding:0 3px; display:block; white-space:nowrap; cursor:pointer; }'+
              'a.fa_mention_suggestion.fam-focus { color:' + fa_mentionner.color.hover_font + '; background:' + fa_mentionner.color.hover_background + '; }'+
              '.fa_suggested_avatar { height:20px; width:20px; vertical-align:middle; margin-right:3px; }'+
            '</style>');
            // insert faux textarea into document
            fa_mentionner.textarea.parentNode.insertBefore(fa_mentionner.faux_textarea, fa_mentionner.textarea);
            // apply event handlers
            fa_mentionner.textarea.onclick = fa_mentionner.updateFauxTextarea;
            fa_mentionner.textarea.onscroll = fa_mentionner.adjustScroll;
            // update the faux textarea on keyup
            fa_mentionner.instance.keyUp(function(e) {
              if (fa_mentionner.focused && e && (e.keyCode == 13 || e.keyCode == 38 || e.keyCode == 40)) {
                fa_mentionner.updateFauxTextarea(true, e.keyCode);
                return false;
              } else {
                fa_mentionner.updateFauxTextarea(false, e.keyCode);
              }
            });
            // key events for the suggested mentions
            $([document, fa_mentionner.body]).on('keydown', function(e) {
              var that = e.target;
              if (fa_mentionner.focused && e && e.keyCode && (that.tagName == 'TEXTAREA' || that.tagName == 'BODY')) {
                // move selection down
                if (e.keyCode == 40) {
                  var next = fa_mentionner.focused.nextSibling;
                  if (next) {
                    $(fa_mentionner.focused).removeClass('fam-focus');
                    next.className += ' fam-focus';
                    fa_mentionner.focused = next;
                    fa_mentionner.scrollSuggestions();
                  }
                  return false;
                }
                // move selection up
                if (e.keyCode == 38) {
                  var prev = fa_mentionner.focused.previousSibling;
                  if (prev) {
                    $(fa_mentionner.focused).removeClass('fam-focus');
                    prev.className += ' fam-focus';
                    fa_mentionner.focused = prev;
                    fa_mentionner.scrollSuggestions();
                  }
                  return false;
                }
                // apply selection
                if (e.keyCode == 13) {
                  fa_mentionner.focused.click();
                  return false;
                }
              }
            });
            // update focused suggestion on hover
            $(document).on('mouseover', function(e) {
              var that = e.target;
              if (/fa_mention_suggestion/.test(that.className)) {
                $(fa_mentionner.focused).removeClass('fam-focus');
                that.className += ' fam-focus';
                fa_mentionner.focused = that;
              }
            });
          }
        })});

a++

[Mikki]

Ohh c'est magnifique, c'est parfait !! merci énormément pour votre aide !!