Can anyone help with Autocomplete? #233

graingerkid · 2018-02-03T09:13:52Z

Im using a library to autocomplete keywords but I can't get it working with Emojionearea

The following fiddle has 2 textareas one with emojionearea and one without; only the latter is working for autocomplete when you type "@"

https://jsfiddle.net/ukLaz8cm/134/

Can anyone help? JS is not my primary language.

mervick · 2018-02-03T17:09:23Z

You can use bundled textcomplete plugin,
add script below in the your header,

<script src="https://cdn.rawgit.com/yuku-t/jquery-textcomplete/v1.3.4/dist/jquery.textcomplete.js"></script>

and after that

$(document).ready(function() {
    $("#emojionearea1").emojioneArea({
        pickerPosition: "right",
        tonesStyle: "bullet",
        autocomplete: true,
        events: {
            ready: function() {
                this.editor.textcomplete([{
                    id: 'emojionearea',
                    match: /\B@([\-\d\w]*)$/,
                    search: function (term, callback) {
                        // this code must be replaced with your
                        // load mentions from ajax
                        var mentions = ['Peter', 'Tom', 'Anne'];
                        callback($.map(mentions, function (mention) {
                        return mention.indexOf(term) === 0 ? mention : null;
                    }));
                    },
                    template: function (value) {
                        return '<b>' + value + '</b>&nbsp;';
                    },
                    replace: function (value) {
                        return '<b>@' + value + '</b>&nbsp;';
                    },
                    cache: true,
                    index: 1
                }]);
            }
        }
    });
});

Example: https://jsfiddle.net/1v03Lqnu/898/
type : for autocomplete emotions
type @ for autocomplete mentions

LouisSyfer · 2018-07-21T14:48:01Z

Hi Mervick,

First of all congratulations for this emoji plugin. I think is the best we can find now. But I have the same problem as described is this discussion. I tried all the codes I could and I checked everything about what's showing here and textcomplete. I want to associate your plugin and a mention autocomplete code but I can't reach my database table to retrieve the datas. When I type @ it's showing [object Object]. I tried all I know to debug. With no result. If only you could help please ! If you would just reply and I'll show to you the code I did. Thanks a lot and see you soon !

mervick · 2018-07-21T16:52:01Z

@LouisSyfer

$(document).ready(function() {
    $("#emojionearea1").emojioneArea({
        pickerPosition: "right",
        tonesStyle: "bullet",
        autocomplete: true,
        events: {
            ready: function() {
            	$.ajax('url/to')
                .success(data) {
                   this.editor.textcomplete([{
                      id: 'emojionearea',
                      match: /\B@([\-\d\w]*)$/,
                      search: function (term, callback) {
                          callback($.map(data, function (mention) {
                          return mention.indexOf(term) === 0 ? mention : null;
                      }));
                      },
                      template: function (value) {
                          return '<b>' + value + '</b>&nbsp;';
                      },
                      replace: function (value) {
                          return '<b>@' + value + '</b>&nbsp;';
                      },
                      cache: true,
                      index: 1
                  }]);
                });
            }
        }
    });
});

LouisSyfer · 2018-07-21T18:40:26Z

Good evening Mervick.

Thank you for the reply. I try as soon as possible and I let you know.

Thanks again and see you soon !

LouisSyfer · 2018-07-22T00:08:54Z

Hi Mervick,

Some news :

I should have adapted your code to fit with the most recent jQuery version :

$("#content").emojioneArea({
autocomplete: true,
events: {
ready: function() {
$.ajax({
url:'mention_autocomplete_posts.php',
success:function(data) {
this.editor.textcomplete([{
id: 'emojionearea',
match: /\B@([-\d\w]*)$/,
search: function (term, callback) {

                    callback($.map(data, function (mention) {
                    return mention.indexOf(term) === 0 ? mention : null;
                }));
                },
                template: function (value) {
                    return '<b>' + value + '</b>&nbsp;';
                },
                replace: function (value) {
                    return '<b>@' + value + '</b>&nbsp;';
                },
                cache: true,
                index: 1
            }]);
    
        }
        
        });
        
    }
}

});

Console says : Uncaught TypeError: Cannot read property 'textcomplete' of undefined

I tried to install inside the js file :

{

                    id: css_class,
                    match: /\B@([\-\d\w]*)$/,
                    search: function (term, callback) {
                    		// this code must be replaced with your
                        // load mentions from ajax
                       $.ajax({
                        url:'mention_autocomplete_posts.php',
                        success:function(mentions) {
                            
                        callback($.map(mentions, function (mention) {
                            return mention.indexOf(term) === 0 ? mention : null; 
                        }));
                    },
                    template: function (value) {
                        return '<b>' + value + '</b>&nbsp;';
                    },
                    replace: function (value) {
                        return '<b>@' + value + '</b>&nbsp;';
                    },
                    cache: true,
                    index: 1
                   });
                }
            }

Not working as well. Maybe I did something wrong. Thanx anyway !

mervick · 2018-07-22T00:34:10Z

Add this script to head

<script src="https://cdn.rawgit.com/yuku-t/jquery-textcomplete/v1.3.4/dist/jquery.textcomplete.js"></script>

LouisSyfer · 2018-07-22T00:39:48Z

I have done it already. That changes nothing...

mervick · 2018-07-22T00:42:37Z

@LouisSyfer , if you want my help. please first format your code

LouisSyfer · 2018-07-22T00:44:44Z

I would like to. Sorry I don't know why it did not...

mervick · 2018-07-22T01:19:06Z

@LouisSyfer
ref https://help.github.com/articles/basic-writing-and-formatting-syntax/#quoting-code

LouisSyfer · 2018-07-22T02:09:18Z

Maybe this one is the best. But I don't know why I get [object Object] ... Sure I'm better in PHP !!

$("#content").emojioneArea({
                autocomplete:true,
                events:{
                ready: function() {
                this.editor.textcomplete([{
                    match: /(^|\s)@(\w*)$/,
                    dataType: "json",
                    search: function (term, callback) {
                        // this code must be replaced with your
                        // load mentions from ajax
                         $.getJSON("mention_autocomplete2.php", { q: term })
                        .done(function (resp) { callback(resp); })
                        .fail(function ()     { callback([]);   });
        
                        callback($.map(term, function (mention) {
                        return mention.indexOf(term) === 0 ? mention : null;
                    }));
                    },
                   template: function (value) {
                        return '<b>' + value + '</b>&nbsp;';
                    },
                    replace: function (value) {
                        return '<b>@' + value + '</b>&nbsp;';
                      
                    },
                    cache: true,
                    index: 1
                }]);
            }
        }
    });     

But maybe the problem come from the php side...


        session_start(); 
        
	include_once("config/database.php");
	include_once("includes/functions.php");
	include_once("includes/constants.php");
    

        
if(isset($_POST['term'])){


$term= $_POST['term'];
 //$term= $_GET['term'];
$query = $db->prepare('SELECT * FROM user 
                       WHERE mention_user LIKE :term'); 
$query->execute(array('term' => '%'.$term.'%'));



$array = array(); 

?>
<?php    
while($donnee = $query->fetch()) 
{
    
   array_push($array, $donnee["mention_user"]);
    //array_push($array, $donnee["id_user"]);
    

    ?>
    
        

<?php 

} ?>

<?php
echo json_encode($array);




}
?>

mervick · 2018-07-22T09:51:35Z

Your code is terrible!

At least you have error in the php side,
in js, you send GET request with param q

$.getJSON("mention_autocomplete2.php", { q: term })

so in php you should get search param from

$_GET['q']

but you use

if (isset($_POST['term'])) {
    $term= $_POST['term'];

LouisSyfer · 2018-07-22T11:40:38Z

Well I think I have already tried this ($_GET[‘q ‘] instead of $_POST[‘term’]), I will try again and let you know...

LouisSyfer · 2018-07-22T16:43:50Z

IT'S WORKING ! Almost... I mean you can retrieve datas from your table, the autocomplete works, but like a normal one : you type @ at the beginning of the textarea but I have to make a "carriage" return if I want to mention other user.
Ex :
It' possible to do :
@mervick how are you ?
@jonhdoe are you fine ?

But you can't :
How are you @mervick ? And what about you @johndoe ?

The code :

$("#content").emojioneArea({
                autocomplete:true,
                events:{
                ready: function() {
                this.editor.textcomplete([{
                    match: /(^|\s)@(\w*)$/,
                    dataType: "json",
                    search: function (term, callback) {
                        // this code must be replaced with your
                        // load mentions from ajax
                          $.getJSON("mention_autocomplete2.php", { q: term })
                        .done(function  (resp) { callback (resp);  })
                        .fail(function (resp)     { callback([resp]); });
                        
                        callback($.map(term, function (mention) {
                        return mention.indexOf(term) === 0 ? mention : null;
                    }));
                    },
                   template: function (value) {
                        return '<b>' + value + '</b>&nbsp;';
                    },
                    replace: function (value) {
                        return '<b>@' + value + '</b>&nbsp;';
                      
                    },
                    cache: true,
                    index: 1
                }]);
            }
        }
    });     

   
<?php

        session_start(); 
        
	include_once("config/database.php");
	include_once("includes/functions.php");
	include_once("includes/constants.php");
    

$term= $_GET['q'];
$query = $db->prepare('SELECT * FROM user WHERE mention_user LIKE :q'); 
$query->execute(array('q' => '%'.$term.'%'));


$array = array(); 


?>

<?php    

while($donnee = $query->fetch())
        
{

    array_push($array, $donnee["mention_user"]);
   
?>
    
     

<?php } ?>

<?php
header('Content-Type: application/json');
echo json_encode($array);




?>

LouisSyfer · 2018-07-22T16:58:19Z

It's ok Mervick it's working fine THANKS A LOT !

I just deleted "index:1" at the end of the code. I'm going to test it again but for the moment THAT WORKS pefectly !

graingerkid closed this as completed Feb 3, 2018

This was referenced Feb 3, 2018

emojionearea & jquery.mentionsInput #214

Closed

Is there an option to display shortnames in the emojioneArea? #137

Closed

mervick mentioned this issue Sep 6, 2018

initializing emojionearea with tributjs initialized input element not working fine #305

Closed

mervick mentioned this issue Oct 22, 2018

Atwho and Emojionearea not working ? #315

Closed

mervick mentioned this issue Dec 1, 2018

atwho JavaScript and jQuery area emojis plugin Not working together on same input field #312

Closed

BAALC16 mentioned this issue Jul 21, 2021

textcomplete js doesn’t work with emojiarea #438

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can anyone help with Autocomplete? #233

Can anyone help with Autocomplete? #233

graingerkid commented Feb 3, 2018 •

edited

Loading

mervick commented Feb 3, 2018 •

edited

Loading

LouisSyfer commented Jul 21, 2018

mervick commented Jul 21, 2018

LouisSyfer commented Jul 21, 2018

LouisSyfer commented Jul 22, 2018

mervick commented Jul 22, 2018

LouisSyfer commented Jul 22, 2018

mervick commented Jul 22, 2018

LouisSyfer commented Jul 22, 2018

mervick commented Jul 22, 2018

LouisSyfer commented Jul 22, 2018

mervick commented Jul 22, 2018

LouisSyfer commented Jul 22, 2018

LouisSyfer commented Jul 22, 2018

LouisSyfer commented Jul 22, 2018

Can anyone help with Autocomplete? #233

Can anyone help with Autocomplete? #233

Comments

graingerkid commented Feb 3, 2018 • edited Loading

mervick commented Feb 3, 2018 • edited Loading

LouisSyfer commented Jul 21, 2018

mervick commented Jul 21, 2018

LouisSyfer commented Jul 21, 2018

LouisSyfer commented Jul 22, 2018

mervick commented Jul 22, 2018

LouisSyfer commented Jul 22, 2018

mervick commented Jul 22, 2018

LouisSyfer commented Jul 22, 2018

mervick commented Jul 22, 2018

LouisSyfer commented Jul 22, 2018

mervick commented Jul 22, 2018

LouisSyfer commented Jul 22, 2018

LouisSyfer commented Jul 22, 2018

LouisSyfer commented Jul 22, 2018

graingerkid commented Feb 3, 2018 •

edited

Loading

mervick commented Feb 3, 2018 •

edited

Loading