ivirabyan / jquery-mentions Goto Github PK

The function setSelectionRange is not supported in IE8. Function is used on line 28. I inserted some test code based on if the function exists, and return null if it doesn't:
if (input[0].setSelectionRange) {
// existing code
}
else {
return null
}

This seems to make IE8 work.

I have faced strange behaviour of this plugin.
I have code like following

$('.wiki-edit').mentionsInput({source: function(request, response){
        project_id = $('form').first().attr('action').replace( /\/projects\//, '' );
        project_id = project_id.replace( /\/search/, '' );
        $.ajax({
            url: '/mention/search',
            data: {'search_tag': request, project_id: project_id},
            success: function(result) {
                response(result['users'])
            }
        });
    }});

In my .wiki-edit textarea i have name like issues[note] - thats original source. However when i use mentionsInput(), it removes name from my textarea, and creates new hidden input with same name.
I could copy text before form submit, but i have many views, and therefore many inputs with different names, so it'd take alot of time to fix it. Is there any way to keep input name?

I am trying to clear the content editable div by invoking the clear function

$div.mentionsInput('clear');

this is throwing an error; looks like _update is not present in 'MentionsContenteditable'. Also I tried replacing _update with update but then it threw

Uncaught TypeError: this._initValue is not a function

not sure what the intended behaviour here is

In both you example.html and my implemented version, the script puts '@undefined' into the hidden input

This plugin's great.. but I wonder how to implement this plugin with ajax. I tried using this code

<script> $('.mentions').mentionsInput({source: 'data.json'}) </script>

data.json
[ {value: 'alex', uid: 'user:1'}, {value: 'andrew', uid: 'user:2'}, {value: 'angry birds', uid: 'game:5'}, {value: 'assault', uid: 'game:3'} ]

but those name didn't appear.

How to fix it?

I get this character after every mention which I haven't managed to remove

and it shows as a question mark when I output it:

Apparently, it's a character Chrome can't display (see http://stackoverflow.com/questions/23511275/json-response-format-error-red-dot-bullet-before-response)

char var dump returns this: ""

Any thoughts on why this is happening?

How can I disable the default helper text given by jQuery UI Autocomplete.

2 results are available, use up and down arrow keys to navigate

I inspected the match regex that you are using and it states that it will match between 0-20 characters after the trigger, usually being "@".

I ran a test by typing the following, or similar, into the text box... yet the suggestions within the jQuery UI menu dropdown still remained displayed.

@Testing testing 123 this is far more than 20 characters now...

The only way I could get them to hide was when the textarea lost focus. Once it regained focus again, I could then begin to delete character by character until there were 20 remained and the suggestions then displayed again as expected.

Documentation doesn't seem to list any methods that can be used to retrieve the mentions marked up value. Looking for a synchronous way to do that. Looked at the source but didn't see anything (maybe I missed it). Only saw public methods append, clear, and destroy.

This is not an issue per se but a query. Is there any way we can make this plugin compatible with ckeditor? I have followed the suggestion mentioned by you and included contenteditable in mentions input.

But this part of the code is throwing me errors -

boundary = document.createRange(); boundary.setStart(node, this.start); boundary.collapse(true); rect = boundary.getClientRects()[0]; posX = rect.left + (window.scrollX || window.pageXOffset); posY = rect.top + rect.height + (window.scrollY || window.pageYOffset);

I am unable to fix the errors found in _setDropdownPosition method. Is there any alternative?

I have a textarea with a separate toolbar on the side that will add little smilie faces or characters into the textarea by clicking a a toolbar button. I'll give you two scenarios, in both cases the smilie face has been inserted into the box by pressing a smilie face icon.

Scenario A

Hi @mark22 how are :) you?

In scenario A, it works just fine. I think its because I'm physically typing text after my javascript inserted
Output:

Scenario B

Hi @mark22 how are you? :)

In scenario B, the smilie face at the end does not get submitted into my form.

Output:

If my hunch is correct that the script is actually updating the final to be submitted textarea content everytime a user types a character, is there an 'update' call I can make when a user clicks submit to make one final update to capture the trailing externally added characters? Or some other possible solution?...

So, I've been applying this nice plugin into all my textareas for mentions. I do have 2 textareas with the plugin bootstrap-wysihtml5 , and can't get it to work ! It does create an < iframe > with < body content-editable="true" > , when type any character an error is threw (Cannot read property "textContent" of null). ¿ How may I solve this ?.
Thanks for this plugin, and for the answer too !

PS: I'm Argentinian. So native Spanish speaker here !

Hello,

First thank you for the plugin, I've tried many others and yours is by far the best.

Just wondering how I would make a remote ajax call with a parameter? (if I type @br to make a search on BR in my database and return a json array)

Thank you!

I get the following when calling getRawValue:

I run jQuery v2.1.1

Any idea?

If I create a mention and then another mention before that original mention, the original mention is removed.

For example, if my textbox has the following ("TestingTest" being the mention):

Hello, this is an example TestingTest.

If I then go back to the start of the textarea to add in another mention, the first mention, being "TestingTest" is removed and is then displayed like normal text without the styling.
For example, if I add a new mention (called "NewMention") before the original:

Hello NewMention, this is an example TextingTest.

"NewMention" will have the correct styling, although the original mention, "TestingTest" does not.

There is a nasty bug in contentEditable div example, when selecting option from a list, when first option in the list is selected and you press UP key, or when you are selecting last option in the list and press DOWN key.
The whole content of the div is rearranged, text scraped, all previous @mentions lost etc..
It works fine with textarea, bug is only there in contentEditable div. Tested in Chrome and Firefox.

The plugin works well and initializes properly and I am able to see all the suggestions loaded via remote url in a contenteditable div.

Initialization:
$('.statusinput').mentionsInput({source: "/item_getter.php?key=tagfriend",showAtCaret: true});

I try to get the mentions in the console:

console.log($('.statusinput').mentionsInput('getMentions'));

I get this:

If I try some other method like:

console.log($('.statusinput').mentionsInput('getValue'));

I get an error like this:

If I check my contenteditable div after adding a tag, this is how it looks (from inspect element of chrome)

<div class="statusinput mentions ui-autocomplete-input" contenteditable="true" data-placeholder="What would you like to say?" style="height: 102px; overflow-y: hidden;" autocomplete="off">test <strong data-mention="db16abcd03">bhavani v</strong>&#8203;</div>

Basically, only initialization works well for me and I am able to see suggestions and tag people. None of the methods are working. What should I do? Is this a bug?

UPDATE
All methods are working if I use a textarea. But the same is not for contenteditable div. So, its a bug

Comparing podio/jquery-mentions with this library, there's a 3kb difference in the non-minified JS files. And for this library to work I need to include jQuery UI, which at minimum is 72kb.

As far as I see it, that's 97kb for this library to work, against podio/jquery-mentions, which is 28kb. That's more than three-fold.

I was really hoping that I'd found an improved library, as Podio's lib is barely maintained, but this is ridiculous. So I am curious if you plan to keep the jQuery UI dependency?

Hey, me again with another bug. ;)

Just noticed that if for example I'm adding the @mention to the end of a sentence and wanted to add a period after the mention to close the sentence, there's a bug with the jquery-mentions. Once you enter the mention, it adds the mention to the editor with a space after the mention, so once you backspace to add the period, that also pops open the mention drop down box again because it thinks you want to go back and change or edit the mention. You can go ahead and add the period, but the mention drop down never disappears from you screen.

I would like to be able to show a loading indicator if the jquery-mentions starts to send an external query. I was trying to use the autocomplete syntax like

$('textarea.mentions').mentionsInput({
  source: '/search.json',
  response: function( event, ui ) {
    console.log('test');
  }
});

but I had no luck with it. Is there any solution to this problem? Would be great.

Thanks so much for redoing this plugin. It was in need of some love and I'm glad you provided it. I was working through it and added a couple of things if you want to grab them: https://github.com/brandonhall/jquery-mentions/commit/5a800fb4fec8f811c52817d6190567797fb1122b

I didn't deal with a pull request because they are simple and I don't use CoffeeScript.

I use your example, but this happens:

can you help me ?

I apologize in advance that my questions aren't really "bugs" but I wasn't sure what other avenues were available for asking questions.

I've got this working nicely and have the drop down styled to my liking. I'm now wondering if it's possible to include the @ sign in front of the returned mention?

Also, in the data source, is it possible to include an image? I'd like to include a unique image next to each item in the returned list but I'm not seeing how to do it.

Sorry... I also wanted to ask about using a URL .json data source. I'm going to be using for for returning users of my site. What if there's like 50k users hypothetically? Would all 50k users be returned for the auto complete? What seems to be the best approach (but I'm a novice here) is with every character that's typed, it would dynamically add that letter to the URL that I'm using for the data source to which I could then use that letter to query the database and return .json data for users starting with just that one letter rather than all 50k users. Does that make sense?

EDIT Upon further review of the jquery UI docs for autocomplete, I noticed that a querystring is added to the source with a "term" field. So I believe that's what I needed regarding that last question above.

Thanks.

It is working properly only in chrome. Css is not showing up as expected in IE(9), opera(12.4) and firefox 25.0. Firefox only have problem with input box

I noticed today that after I type my @mention, it inserts a space after but I don't seem to notice this same behavior on the included example. This seems to be causing an issue in some browsers as it doesn't seem to register that space and I'm left with text butting up right next to the @mention.

I did alter line 498 a bit to suit my own needs:

return "<a href=\"" + "/" + mention.value + "\">" + "@" + mention.value + "</a>";

Doesn't appear that the change makes a difference though as even with the default code that ships with jquery-mentions, I'm still getting the space after. I'd love to just duplicate the demo functionality where the blinking cursor is places right at the end of the at mention and a manual space is needed to start the next word

The result I'm seeing in some browsers for "@mention this is some text" becomes:

"@mentionthis is some text"

Hope that makes sense.

Thanks

Is there any callback that fires after you select mentioned object? I want to modify its appearance in my textarea

The $('.mentions').mentionsInput().destroy() giive me the following error $(...).mentionsInput(...).destroy is not a function.

How works ?

sumthing like

source1: [
{value: 'alex', uid: 'user:1'},
{value: 'andrew', uid: 'user:2'},
],
source2: [
{value: 'angry birds', uid: 'game:5'},
{value: 'assault', uid: 'game:3'}
],

i need to use one input field and want to highlight words from each list differently

Great Resource ! Thanks a Load

Hi,

Thx for your library, works really well. In the backend (through ajax) I'm matching results case-insensitive (by doing LOWER in DB). I noticed however that in the front end, it will only highligh matched substrings in bold if the case is exactly the same. Is there a way to change this?

Another minor question: is there a way to only trigger the request to the server after minimum 2 chars?

The documentation states that this plugin supports WYSIWYG editors, but I'm having troubles trying to make it work with TinyMCE.

Is there something additional I need to do in order to make it work or is it a bug? It works fine for simple textareas

Please, define versioning for this repository. It would helpful for creating a rails asset (https://rails-assets.org/).

Hello, this isn't a true issue per say- but it would be fantastic if I can resolve this. Your mentions function has been exactly what I have been needing.
When you are requesting mentions- It comes out in a neat list under the input box. You may scroll through these (with arrow keys) and select one with the Enter key. Is there a way in which jQuery can detect that the browser's focus is in that very list, instead of the input box, only for that selection time? Perhaps there is a variable in your script which records whether that list is being shown currently-or-not. For when the user will select the mention, they should still be able to type more text before submitting their entire thought. I'd like to do this without showing another button- and the Enter key should be that method.

Thank you for focus on this. It'd be a real help.

Wondering if this is compatible with something like TinyMCE or Froala editor? Mainly Froala.

Just noticed some weirdness when tabbing to enter the @mention (rather than just clicking the name in the dropdown with a mouse or hitting enter key).

I recorded a video as I figured it would be easier to see it rather than me explain it: https://app.box.com/s/sukvf6mfba5tu6e76euvxp2w5dgkpzdf

Hey! Back with another question. I've spent the last few days getting my uploads working with S3. Now that all my uploads are on S3, when I start typing a mention the mentions work fine except that with every key pressed, the image flickers. This behavior isn't present when I'm pulling image from my local server, only from S3. Any ideas why that might be? I'm currently on my local dev server (django site). So, not sure if this is just something with localhost or if it will also happen on production server.

First off, this is incredible. I came from using the orignal podio's jquery.mentionsInput and as advertised, this is much more stable and fixes the big glaring bugs.

There are a few features missing that I think would be great if they would be added and would make this the complete project as they make a big different from UX point of view:

1. Have the first item on the list automatically selected. That way you dont have to break up your speed typing, you just press [enter] and keep typing. This is the way Facebook, Twitter, Github and Podio's works

2. Allow highlight of the actual keyword the user typed. This is not a big of a deal as #1 and #2 but would be really neat as I think it works nicely on Podio's version

Thanks again for this amazing project, it has been a life saver. Aside from the UX, podios has too many bugs to use in the real world, but this one works great!

Here is the steps to produce the bug:
-- Just add a mention in textarea in IE11 and then type nothing
-- Then remove the focus to somewhere else and focus in textarea again at the end of the text
-- Now press space. You'll see the previous selected mention is unselected

Common request is that data source is queried while user types. Does this widget supports that. Original mentions input had onDataRequest and callback so it was easy to implement ajax calls.

So I'm not sure how much of an issue this is as long as there is proper server side sanitizing but typing something like an alert inside the textarea with the below code will execute the alert, can this behaviour be prevented?

This:

<textarea class="bla"></textarea>
<script>
    $('.bla').mentionsInput({
        source: 'media/view/get_users',
        showAtCaret: true
    });

</script>

Will execute anything typed in such as this:

<script>alert('hello');</script>

This might be useful when you use things like font-awesome.

If I add a URL in the text box they are sanitized by the escape_html method. I used sanitize it on the server-side
i.e //www.google.co.in/ translates to //www.google.co.in/

But the plugin converts it to //www.google.co.in/

This is breaking my current app. Is there a way to override escape_html method?

When I use it's in the mention text area, it'll become it's. Is that expected behavior? I really don't want that to happen.

I apologize for all the questions I'm asking, but I've worked on this for a few hours now and can't seem to get the URL as the source to work.

I'm initializing the mentions using:

$('.element').mentionsInput({
    source: "http://127.0.0.1:8000/mentions/",
    showAtCaret: true
});

If manually browse to: http://127.0.0.1:8000/mentions/?term=de then I get a response back on the page that looks like this:

{'id': 18, 'name': u'deronsizemore'}

So it seems that I'm returning the data properly to that URL source, but yet the autocomplete drop down never drops down when I start typing "@de" which it should. So I can only assume I'm doing something wrong?

Also, what values should the json response have? In the example above, I'm returning "id" and "name" to the page per this link: http://podio.github.io/jquery-mentions-input/. That said, I know the example you supplied, the data was called "uid" and "value."

What am I missing?

Now the code contains almost no comments at all.

hi I was wondering if there was anyway to add authorization header on ajax request ?

Is it posible to show the drop-down list on top of the focused input? My desired input/textarea is fixed to the bottom of the screen and I wish the options to be visible anyway.

When I turn on the mentions on my input box: it looks like this!
(The image I linked is of my input box with a correctly positioned focus region. However, the display of the white-box which-is-the input style gets moved up several pixels. What is wrong here??

What can I do to combat the stylizing ... which is probably on the highlighter box that your code creates. I love this mentions ability and I would love to continue using it.
Can you help me with this?

Currently after adding a mention the cursor stays at the end of the mention text. I think it would be nice to add space after adding a mention.

For example (I'm using _ to denote the cursor), if I add a mention this happens @alex_, but it would be better for it to behave this way @alex _. Does that make sense?

I propose this because after adding a mention I find myself _always_ adding a space after to continue typing.

I have a situation where my wysiwyg editor (Redactor 10) fails to immediately sync a newly inserted mention into its underlying textarea. The mention result appears correctly in the contenteditable div, but doesn't update in the hidden textarea until a keypress is performed, to add a space, for example.

I tried utilizing ui-autocomplete callbacks, such as close and change, but they seem to be not supported in jquery-mentions? (Or I have bad jquery-fu) On the other end, I tried forcing Redactor to sync. No luck.

The simplest and generally useful fix could be some kind of 'all done' callback for when an item has successfully been inserted into the input? (I can then improvise a sync from there on)