Allow the user to choose a smiley in a input or textarea field

Allow the user to choose a smiley in a input or textarea field

SmileyBundle also allows you to search and add the symbol of a smiley directly from a textarea or simple input. Convenient to use a chat (for example) and thus allow users to access the list of available smileys and add them directly in their text ! You will only have to transform the smiley symbol before the display.

Step 1 :

Enable the route in your app/config/routing.yml file :

kay_smiley:
    resource: "@KaySmileyBundle/Resources/config/routing.yml"
    prefix:   /KaySmiley

In your html page think of adding the following scripts :

<link href="{{ asset('bundles/kaysmiley/css/jquery.atwho.min.css') }}" rel="stylesheet" />
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('bundles/kaysmiley/js/jquery.caret.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/kaysmiley/js/jquery.atwho.min.js') }}"></script>

Add to your textarea or input the class inputKaySmiley

<textarea class="inputKaySmiley"></textarea>

Step 2 : Usage

$(document).ready(function(){
    $('.inputKaySmiley')
        .atwho({
            at: ":",
            data: '{{ path('kay_smiley_get_json_list_smiley') }}',
            displayTpl: '<li><img src="${urlSmiley}" alt="Smiley"/></li>',
            insertTpl: "${symbole}",
            limit: 50
         })
    ;
});

SmileyBundle uses At.js, if you don't want to use the SmileyBundle implementation or want more information about its use, go to the repository At.js GitHub