Add Github like mentions autocomplete to your application.

Overview

⚠️ Announcement ⚠️

This project was no longer maintained. You could use zurb tribute instead.


An autocompletion library to autocomplete mentions, smileys etc. just like on Github!
Build Status

Notice

At.js now depends on Caret.js.
Please read CHANGELOG.md for more details if you are going to update to new version.

Demo

http://ichord.github.com/At.js

Documentation

https://github.com/ichord/At.js/wiki

Compatibility

  • textarea - Chrome, Safari, Firefox, IE7+ (maybe IE6)
  • contentEditable - Chrome, Safari, Firefox, IE9+

Features Preview

  • Support IE 7+ for textarea.
  • Supports HTML5 contentEditable elements (NOT including IE 8)
  • Can listen to any character and not just '@'. Can set up multiple listeners for different characters with different behavior and data
  • Listener events can be bound to multiple inputors.
  • Format returned data using templates
  • Keyboard controls in addition to mouse
    • Tab or Enter keys select the value
    • Up and Down navigate between values (and Ctrl-P and Ctrl-N also)
    • Right and left will re-search the keyword.
  • Custom data handlers and template renderers using a group of configurable callbacks
  • Supports AMD

Requirements

  • jQuery >= 1.7.0.
  • Caret.js (You can use Component or Bower to install it.)

Integrating with your Application

Simply include the following files in your HTML and you are good to go.

<link href="css/jquery.atwho.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/jquery.caret.js"></script>
<script src="js/jquery.atwho.js"></script>
$('#inputor').atwho({
    at: "@",
    data:['Peter', 'Tom', 'Anne']
})

Bower & Component

For installing using Bower you can use jquery.atwho and for Component please use ichord/At.js.

Rails

You can include At.js in your Rails application using the gem jquery-atwho-rails.

Core Team Members

Comments
  • Doesn't work with Froala editor

    Doesn't work with Froala editor

    I'm trying to get it working with Froala editor (https://github.com/froala/wysiwyg-editor) but there is an error: jquery.atwho.js:542 Uncaught InvalidNodeTypeError: Failed to execute 'surroundContents' on 'Range': the given Node has no parent.

    It happens after you have typed "@". Here's the test case http://jsbin.com/lajuni , try typing "@" .

    opened by vahtel 37
  • Previous replacements get clobbered in contenteditable regions in WebKit/Blink browsers

    Previous replacements get clobbered in contenteditable regions in WebKit/Blink browsers

    Reproducable on the demo page (see below) (even thought its using old versions of jQuery and At.js). But it also exists if you're using current jQuery and At.js (reproduced with 2.1.4 and 1.3.2 respectively). This seems to only happen with contenteditable fields, not textareas. Steps to reproduce on the demo page:

    1. Go to demo page http://ichord.github.io/At.js/ in Chrome or Safari
    2. Click on the contenteditable field to place the cursor after the :h
    3. Select the Heart emoji from the dropdown when it appears to insert it (I did it by pressing Enter key)
    4. Press backspace followed by space to delete and re-add the space injected after the emoji image.
    5. Type : to display the dropdown and choose the first one in the list ("smile" for me) and insert it (I pressed Enter)
    6. The Heart is replaced with the Smile emoji.

    However, this only seems to happen following a replacement that IS NOT prefixed with an "At" symbol in the insertTpl. To illustrate, repeat steps 4-6 by alternating between : replacements and @ replacements. If you do 2 of each, you will only be left with the @-prefixed replacements.

    I'm guessing there's a boundary detection issue with the replacement algorithm.

    Now that I think I've identified the details of the issue, I will (hopefully) be posting a PR for this in the next few days.

    This does not happen with replacements that are prefixed with the "At" symbol in the insertTpl template. So, in addition to the above, if you do steps 1-4, and then type an @ and select one of the options, the previous replacement is preserved. But if after the @-prefixed replacement, you repeat steps 3-6 with the : matcher, the emoji will

    bugs 
    opened by webbower 24
  • Doesn't work cross-document

    Doesn't work cross-document

    Let's say I have an iframe A with jQuery, atwho, etc. and an iframe B with just HTML & CSS (incl. the atwho CSS).

    In my first iframe I can do stuff like $(selector, iframeB.contentDocument) which will use the other iframe's document as context. Works perfectly.

    This doesn't work: $(selector, iframeB.contentDocument).atwho().

    But this does: iframeB.contentWindow.$(selector, iframeB.contentDocument).atwho() (assuming I now have to load jQuery & atwho in the other iframe).

    I don't know exactly why. It seems to be assuming the window/document is the current window/document. It might be parts like https://github.com/ichord/At.js/blob/master/dist/js/jquery.atwho.js#L789 where maybe it should pass the same context I passed to $(selector, iframeB.contentDocument)?

    I tried looking into it but I can't seem to find out how a plugin can access which context was originally passed.

    opened by adam-lynch 24
  • IE9 Nightmare

    IE9 Nightmare

    I have tested in almost every other browser and everything is fine and dandy however when I test in in IE9, nothing, I mean nothing no errors coming through and the script is firing I think as my callback->remote_filter logs are displaying

    $('#postEntry').atwho({
       at: "@", 
       tpl: "<li data-value='@${name}'><img src='${avatar}' height='20' width='20'/> ${name} </li>", 
      data: "/webAPI/getSearchPostUserKeyword/7", 
      limit: 10, 
      insert_tpl: "<user class='userHighlight' id='user://${id}'>${name}</user>",
      'callbacks': {
          filter: function (query, data, search_key) {
                  console.log(data);
                  return this.call_default("filter", query, data, search_key);
          }
       }                    
    })
    

    Is there something obvious here?

    opened by erswelljustin 14
  • Enable iframe functionality.

    Enable iframe functionality.

    Most popular wysiwyg editors use an iframe with a contenteditable body inside. It would be nice if at.js could work on that element inside the iframe. One workaround is to dynamically include all the resources within the iframe and call the atwho function on the desired element within that context. However, it would be much nicer if the parent context could pass the element within the iframe and just work, as it does with inputs, textareas, and contenteditables as long as they are within the same document context.

    improve 
    opened by danemacmillan 14
  • 使用ajax获取json数据的时候,报错

    使用ajax获取json数据的时候,报错

    TypeError: t.sort is not a function

    ...turn t=this.$inputor,r=t.val(),n=this.get_opt("display_flag")?0:this.current_fla...

    jquery.atwho.min.js (第 4 行)

    TypeError: t.sort is not a function

    ...turn t=this.$inputor,r=t.val(),n=this.get_opt("display_flag")?0:this.current_fla...

    ----------------------下面是我调用时的代码: $("textarea").atwho("@", { data:"/at/ajax.php" });

    引用的2个js库是以下2个: http://code.jquery.com/jquery-1.9.1.min.js http://ichord.github.io/At.js/assets/js/jquery.atwho.min.js

    opened by ghost 13
  • on new line(enter key) mention list is not getting display for ContentEditable

    on new line(enter key) mention list is not getting display for ContentEditable

    Hello,

    We have seen your demo and it works fine but the only problem we faced was when we type any word (without space) and press ENTER KEY then after that we try to get user mention list but it not display, so instead we type word and give space and then press ENTER KEY then it will work fine.

    So the conclusion is we require space to get mention, but it should get user mention list after ENTER

    Can you please help me out in this issue.

    Thanks

    bugs 
    opened by lakhanOpen 12
  • Allow results to be grouped and sorted by group

    Allow results to be grouped and sorted by group

    We are using Select2 and At.js side by side and love them both for different use cases. We use the same api endpoints for both lookups and for each result has an optional group, and each group is prioritised.

    So for our Select2 dropdowns we can get stuff like this: image

    I'd love to be able to get the same result with at.js.

    feature low 
    opened by brendanheywood 11
  • Improve documentation for communication with a server

    Improve documentation for communication with a server

    Improved documentation concerning how to pass the autocomplete data to a server would be a very helpful improvement.

    $('#post-body').atwho( at:"@", data: "/home/mention_autocomplete", params: params, limit: 7 )

    In this case I would like to pass whatever was typed after the '@' symbol to the server as a parameter named params to use for a search.

    improve 
    opened by wuliwong 11
  • Allow for spaces - our usernames(mentions have spaces in them)

    Allow for spaces - our usernames(mentions have spaces in them)

    Currently we are looking for a solution to allow At.js to support spaces. We implementing both mentions(@) and hashtags(#) and for mentions we need the spaces as they are allowed in usernames/displaynames.

    Is this currently supported - if not is there a feasible way to add it. Possibly through callback?

    I do see that it could be useful to support as parameter, so please consider that as well. (Btw we format our mentions as @[displayname] )

    Thanks in advance

    opened by magnuskvalheim 11
  • Issues with ckeditor & tinymce, also documentation.

    Issues with ckeditor & tinymce, also documentation.

    Hi, Is it possible for you to document any integration with CKeditor or TinyMCE beyond contenteditable? It'd be a great help to me and I'm sure others.

    This project along with Caret is awesome, thank you for your hard work! I'm currently making a Drupal module to implement it :)

    opened by heylookalive 10
  • Gulp tasks do not declare completion

    Gulp tasks do not declare completion

    Gulp as of version 4 runs all tasks asynchronously. It passes to each task a callback function; if that function is not called, the task is assumed to fail.

    The current gulpfile.js defines tasks that will fail in current versions of Gulp:

    [22:17:41] The following tasks did not complete: coffee
    [22:17:41] Did you forget to signal async completion?
    
    opened by bignose-debian 2
  • vbulletin member autocomplete @mention

    vbulletin member autocomplete @mention

    http://ichord.github.io/At.js/

    How can I do the following vbulletin user search code with at.js? How should the application be to show textarea as @exampleuser $ .ajax ({ type: "POST", url: 'ajax.php?do =usersearch',

    I tried it as it did not happen

    if ($_POST['do'] == 'usersearch') { $vbulletin->input->clean_array_gpc('p', array('fragment' => TYPE_STR));

    $vbulletin->GPC['fragment'] = convert_urlencoded_unicode($vbulletin->GPC['fragment']);
    
    if ($vbulletin->GPC['fragment'] != '' AND strlen($vbulletin->GPC['fragment']) >= 3)
    {
        $fragment = htmlspecialchars_uni($vbulletin->GPC['fragment']);
    }
    else
    {
        $fragment = '';
    }
    
    $xml = new vB_AJAX_XML_Builder($vbulletin, 'text/xml');
    $xml->add_group('users');
    
    if ($fragment != '')
    {
        $users = $db->query_read_slave("
            SELECT userid, username FROM " . TABLE_PREFIX . "user
            WHERE username LIKE('" . $db->escape_string_like($fragment) . "%')
            ORDER BY username
            LIMIT 15
        ");
        while ($user = $db->fetch_array($users))
        {
            $xml->add_tag('user', $user['username'], array('userid' => $user['userid']));
        }
    }
    
    $xml->close_group();
    $xml->print_xml();
    

    }

    opened by mizah54 0
  • $inputor.atwho('run') not work

    $inputor.atwho('run') not work

    I found the recent commit https://github.com/ichord/At.js/commit/293933cee4f76dc24068255dcd24e263f553e3c6 changes in src/app.coffee will makes the .atwho('run') method do nothing.

    https://github.com/ichord/At.js/blob/a627b5fcac22c35d52b7fb6d8a93181d2546f3c0/src/api.coffee#L13

    2020-11-23 13-38-03 的屏幕截图

    In previous versions, the example in the document used the atwho('run') method to display the menu after loading the data.

    https://github.com/ichord/At.js/wiki/APIs#run

    image

    But now, I have to make the following changes to show the atwho menu:

     $.getJSON(url, params, function(data) {
    -    $inputor.atwho('load',':', data).atwho('run');
    +    $inputor.atwho('load',':', data).data('atwho').dispatch($.Event('click'));
     });
    
    opened by lc-soft 0
  • Submit textrea does not submit the full word

    Submit textrea does not submit the full word

    Lets say I am looking for a username @llockman

    if I just type @ll and select from the list the username it displays correctly but when I submit the form I only get @ll submitted to the server.

    If I type words after the mention it's fine, it's only when the mention is on it's own or it's the last text in the field

    opened by dannyyounes 0
  • On removing, want to remove the tag and not show the list to mention again.

    On removing, want to remove the tag and not show the list to mention again.

    Hi there, im on 1.4.1 version, im facing an issue that on remove want to remove completely that mention tag and not show the list again to mention, like it was doing in previous version, any help?

    opened by Sal-man 0
Releases(v1.4.1)
A jQuery UI plugin to handle multi-tag fields as well as tag suggestions/autocomplete.

Tag-it: a jQuery UI plugin Tag-it is a simple and configurable tag editing widget with autocomplete support. Homepage Demo Check the examples.html for

Alex Ehlke 2.5k Dec 20, 2022
Ultra lightweight, usable, beautiful autocomplete with zero dependencies.

Awesomplete https://leaverou.github.io/awesomplete/ Awesomplete is an ultra lightweight, customizable, simple autocomplete widget with zero dependenci

Lea Verou 6.9k Jan 2, 2023
Add live paragraph-, word- and character-counting to an HTML element.

Countable Countable is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element. Countable is a zero-dependency l

Sacha Schmid 1.6k Dec 2, 2022
Simple-load-more - This jQuery function will add a functionality to load 5 (or custom) more items. No AJAX functionality.

Simple Load More This jQuery plugin will add a functionality to load 5 (or custom) more items. Best for lists that are long and you want to hide all e

Zeshan Ahmed 28 Jan 4, 2023
Automatically persist your forms' text and select field values locally, until the form is submitted.

Garlic.js Garlic.js allows you to automatically persist your forms' text and select field values locally, until the form is submitted. This way, your

Guillaume Potier 2.4k Dec 21, 2022
:credit_card: make your credit card form better in one line of code

Card - check out the demo A better credit card form in one line of code Card will take any credit card form and make it the best part of the checkout

Jesse Pollak 11.5k Jan 4, 2023
A web app for seeing your recent Twitch chat mentions and/or other tracked words amongst channels you follow.

Mentions A web app for seeing your recent Twitch chat mentions and/or other tracked words amongst channels you follow. Requirements NodeJS. Client ID

Ravenbtw 3 Dec 22, 2022
Autocomplete - Simple accessible autocomplete for vanilla javacript with support for remote & local data, ~3KB gzip

Autocomplete - Simple accessible autocomplete for vanilla javacript with support for remote & local data, ~3KB gzip

Grzegorz Tomicki 58 Dec 24, 2022
ES6 Native @mentions

Tribute A cross-browser @mention engine written in ES6, no dependencies. Tested in Firefox, Chrome, iOS Safari, Safari, IE 9+, Edge 12+, Android 4+, a

zurb 1.8k Jan 4, 2023
A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebWorker like neither of those.

Amuchina A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebW

Fabio Spampinato 9 Sep 17, 2022
Lets you add a character to Hacker News links to add social media and OpenGraph previews for sharing on things like Slack or Twitter.

news.ycombinator1.com Lets you add a character to Hacker News links to add social media and OpenGraph previews for sharing on things like Slack or Dis

Ian Langworth ☠ 38 Sep 18, 2022
A GitHub Action to generate reports that contain all the SSH keys, personal access tokens, GitHub App installations, deploy keys and their respective permissions authorized against a GitHub organization.

A GitHub Action to generate reports that contain all the SSH keys, personal access tokens, GitHub App installations, deploy keys and their respective permissions authorized against a GitHub organization.

Nick Nagel 5 Dec 13, 2022
This site compares your GitHub Profile to your friends, and analyses and tells your GitHub profile score too.

GitHub ⚔️ Duel Deployed at ?? : https://githubduel.vercel.app/ Compare your GitHub profiles with your friends It gives score to GitHub profile based o

Anshuman swain 17 Nov 21, 2022
Awesome Books project with ES6 is an application that was built using Vanilla JavaScript with ES6 features like using arrow functions. This application allows you to keep records of your favorite books.

Javascript Project Awesome Books with ES6 Using Javascript to create a simple Awesome Books project. Populating the books list and then removing one b

Ghazanfar Ali 8 Sep 28, 2022
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

downshift ?? Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. Read the docs | See

Downshift 11.1k Dec 28, 2022
typeahead.js is a fast and fully-featured autocomplete library

typeahead.js Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundat

Twitter 16.5k Dec 31, 2022