Autocomplete In a Textarea

Introduction

Have you ever asked yourself how you could easily integrate in your website, a @mention or #hashtag feature that could be as slick and handy as the one we can find on Twitter, Facebook, …?

One approach is to use Javascript plugins & scripts that perform, most of the time, very basic text search (based on regex) on items already pre-populated in the HTML, or dynamically retrieved from the database via AJAX requests. Those solutions work OK, but quickly show their limits as soon as you want to offer to your users a search experience that handles their typos, is fast, and can work on hundreds, thousands or millions of items.

In this tutorial you will see how you can easily integrate, in a few minutes, an instant search autocomplete within an input or a text area.

Autocomplete textarea 1

You can check out our live demos

We will more specifically focus on implementing a @mention feature, but the same logic can also work if you want to build:

  • A #hashtag feature similar to what you can find on Twitter
  • A mention feature where end-users can easily reference not only people but also places, brands, or any other item/object in your web application
  • An Advanced search with dynamic refinements: see Abacus blogpost

Before moving to the implementation of the feature itself, let’s first have a look at indexing.

Dataset indexing

For this tutorial, we are going to use a dataset of 500 famous actors extracted from themoviedb.org. You can download it here and easily import it using the Dashboard’s explorer and its manual upload feature available in the sidebar on the right.

Autocomplete textarea 2

Screenshot of the upload dialog

If you want to import your own data using the API, you can refer to our guide on importing data.

Below, the actor’s record structure used.

{
  "objectID": "551486440",
  "name": "Tom Hanks",
  "alternative_name": "",
  "rating": 1392, // Custom score describing the actor's popularity
  "image_path": "/a14CNByTYALAPSGlwlmfHILpEIW.jpg"
}

Once the dataset is imported, we can now quickly tweak the relevance and the ranking in order to get the best relevance and performance from Algolia’s search engine. Select your freshly created index, called actors, and go to the Ranking tab. Then add the attributes called name and alternative_name to the attributeToIndex list. Keep in mind that you only need to add on attributeToIndex the attributes that will be used by the engine to perform a full-text search. In our case, we only want to search for actors using their names.

Autocomplete textarea 3

Define the attribute describing each record popularity

Once that’s done, add the attribute rating to the customRanking setting. The custom ranking is used to sort results not only based on the textual matching, but also based on a popularity value related to your business specifications and requirements. In our dataset, we know that records with the highest rating values are the most popular.

Autocomplete textarea 4

We have now imported our actors dataset, and configured our index. Let’s now see how to integrate our search feature in our textarea.

Frontend UI

To ease the autocomplete integration we will leverage the power of the a jQuery plugin called jquery-textcomplete and configure it to perform search calls against the Algolia API. For that, we’ll also use the latest version of our JS API client available on Github (documentation) or directly from the JsDeliver CDN, by including https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js.

HTML

Nothing special here. We include the CSS/JS files of the jquery-textcomplete plugin and import the latest version of the Algolia’s JS API Client. We also add a textarea element inside the <body> section.

<head>
  <!-- Text Autocomplete plugin -->
  <script src="./jquery.textcomplete.min.js"></script>
  <!-- Algolia Search API Client - latest version -->
  <script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
</head>
<body>
  <textarea class="form-control" rows="5" id="autocomplete-textarea">
</body>

Note: We use a textarea, but the plugin also works on regular text inputs.

Javascript

Now to the most interesting part of this tutorial - where all the @mention and search logic gets integrated.

Go to your Dashboard Credentials page and copy / paste your ALGOLIA_APPID and ALGOLIA_SEARCH_APIKEY to the part #1 of the source code.

// #1 - Search configuration - To replace with your own
var ALGOLIA_APPID = '';
var ALGOLIA_SEARCH_APIKEY = '';
var ALGOLIA_INDEX_NAME = 'actors';
var NB_RESULTS_DISPLAYED = 5;
// #2- Algolia API Client Initialization
var algoliaClient = new algoliasearch(ALGOLIA_APPID, ALGOLIA_SEARCH_APIKEY); 
var index = algoliaClient.initIndex(ALGOLIA_INDEX_NAME);
var lastQuery = '';
$('#autocomplete-textarea').textcomplete([
  {
    // #3 - Regular expression used to trigger the autocomplete dropdown
    match: /(^|\s)@(\w*(?:\s*\w*))$/,
    // #4 - Function called at every new keystroke
    search: function(query, callback) {
      lastQuery = query;
      index.search(lastQuery, { hitsPerPage: NB_RESULTS_DISPLAYED })
        .then(function searchSuccess(content) {
          if (content.query === lastQuery) {
            callback(content.hits);
          }
        })
        .catch(function searchFailure(err) {
          console.error(err);
        });
    },
    // #5 - Template used to display each result obtained by the Algolia API
    template: function (hit) {
      // Returns the highlighted version of the name attribute
      return hit._highlightResult.name.value;
    },
    // #6 - Template used to display the selected result in the textarea
    replace: function (hit) {
      return ' @' + hit.name.trim() + ' ';
    }
  }
], {
  footer: '&lt;div style="text-align: center; display: block; font-size:12px; margin: 5px 0 0 0;"&gt;Powered by &lt;a href="http://www.algolia.com"&gt;&lt;img src="https://www.algolia.com/assets/algolia128x40.png" style="height: 14px;" /&gt;&lt;/a&gt;&lt;/div&gt;'
});

Looking for more options? Checkout the jquery-textcomplete plugin documentation

Stylesheet

#autocomplete-textarea {
  min-height: 80px;
  color: #000;
}
#autocomplete-textarea a {
  text-decoration: none;
  font-weight: normal;
  color: #181818;
}
.dropdown-menu .textcomplete-item a,
.dropdown-menu .textcomplete-item a:hover {
  cursor: pointer;
  font-weight: normal;
  color: #000;
  position: relative;
  padding: 3px 10px;
}
.dropdown-menu .textcomplete-item.active a {
  background: #F0F0F0;
}
/* Highlighting of the matching part 
   of each search result */
.dropdown-menu .textcomplete-item a em {
  font-style: normal;
  font-weight: bold;
}
.dropdown-menu .textcomplete-footer {
  border-top: solid 1px #F0F0F0;
  margin-top: 3px;
}

That’s it, the @mention feature is now ready to use. Give it a try searching for your favorite actor: for instance “Loved the last movie with @tom…”

Autocomplete textarea 5

Basic autocomplete dropdown in a textarea - Live DEMO

UI Customization

Let’s now see how we can improve the overall User Experience by upgrading some UI elements.

Highlighting variants

By default, each hit in the JSON response returned by the API, contains an highlighted version of each matching strings (learn more). Those are surrounded by tags and can be easily styled using a few line of CSS. For now, we’ve displayed them in bold, but there are many other handy ways to display them to your users.

a. Using underline

.dropdown-menu .textcomplete-item a em {
 &nbsp;font-style: normal;
  text-decoration: underline;
}

Autocomplete textarea 6

b. Using a light colorful background

.dropdown-menu .textcomplete-item a em {
 &nbsp;font-style: normal;
  background: #fcf8e3;
}

Autocomplete textarea 7

Adding the actors’ photo

Everyone knows that pictures are worth a 1000 words - they help users to identify faster what they are looking for. So why don’t we add the actors’ photo next to their name in order to make it even easier to use, and more user-friendly?

Autocomplete textarea 8

Play with the Live DEMO

The only thing you need to do is to update the template used the ‘textcomplete’ plugin, the css file:

// #5 - Template used to display each result obtained by the Algolia API
template: function (hit) {
  return '<img src="//image.tmdb.org/t/p/w45/'+ hit.image_path +'" /></div>' + hit._highlightResult.name.value + '';},
.dropdown-menu .textcomplete-item a {
  box-sizing: border-box;
  height: 42px;
}
.dropdown-menu .textcomplete-item .picture {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  width: 32px;
  height: 32px;
  overflow: hidden;
  float: left;
}
  .dropdown-menu .textcomplete-item .picture img {
    width: 32px;
  }
.dropdown-menu .textcomplete-item .name {
  float: left;
  margin: 5px 0 0 5px;
}

Check out the demo’s Source Code (on Github)

Rich HTML display within the Textarea

Displaying a raw text once a result is selected is nice. But wouldn’t be even nicer to render HTML results instead. Those ones could include rich text formatting, pictures, …

Autocomplete textarea 9

Play with the Live DEMO

We’d need here to slightly modify what we’ve done till now:

a. The textarea needs to be replace by a “contenteditable div”.

By design HTML input[type=text] and textareas cannot render any HTML. To workaround that limitation we need to use a regular div on which we add the property contenteditable="true". The div then behaves like a regular input, but offers the possibility to render HTML.


<div class="form-control" id="autocomplete-textarea" contenteditable="true"></div>

Learn more about “contenteditable divs” and its browser compatibility, on the Mozilla Developer Network

b. Update the template used when the search result get inserted in the textarea

// #6 - Template used to display the selected result in the contenteditable's div
replace: function (hit) {
  var html = '<a class="tag-item" href="">';
  html += '<div class="picture-wrapper"><img src="//image.tmdb.org/t/p/w45/'+ hit.image_path +'" /></div>';
  html += '<span class="label">' + hit.name + '</span></a>';
  return html;
}

c. Tell the jQuery plugin to render HTML based results

// #7 - Special adapter to handle HTMLContentEditable divs
adapter: $.fn.textcomplete.HTMLContentEditable,
footer: '<div style="text-align: center; display: block; font-size:12px; margin: 5px 0 0 0;">Powered by <a href="http://www.algolia.com"><img src="https://www.algolia.com/assets/algolia128x40.png" style="height: 14px;" /></a></div>'

d. Update the Stylesheet

.tag-item, .tag-item:visited {
  font-weight: normal;
  padding: 2px 3px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #f0f0f0;
  cursor: default;
  border: solid 1px #dadada;
}
  .tag-item:hover {
    text-decoration: none;
  }
  .tag-item .picture-wrapper {
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: hidden;
    top: 3px;
  }
    .tag-item .picture-wrapper img {
      width: 16px;
    }
  .tag-item .label {
    color: #181818;
  }

Check out the demo’s Source Code (on Github)

Conclusion

In this tutorial we have seen together how to create an autocomplete dropdown within a textarea, commonly used by websites and apps like Facebook, Twitter, …, to integrate handy @mention and #hashtags features. We hope this tutorial also inspired you to build and integrate new features in your website or mobile application!

Autocomplete textarea 10

Final version - Live DEMO

Did you find this page helpful?

We're always looking for advice to help improve our documentation! Please let us know what's working (or what's not!) - we're constantly iterating thanks to the feedback we receive.

Send us your suggestions!