Contenteditable HTML tags interfering with editor's predictive text functionality
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I've been trying to create an editor with autocomplete functionality. I'm nearly there (after hacking away at https://github.com/TarekRaafat/autoComplete.js), but because this plugin was designed for search engines I am stuck on some formatting issues caused by contenteditable.

Please see the pen. https://codepen.io/jkhaui/pen/eqBBaZ?editors=0010

Test out its basic functionality, and then see it break when you use bold type, italics, press enter to start a new line, etc. (all these changes add dom nodes for formatting which interferes with the inline autocomplete. If you can help there's a $30 bounty :)
Will also throw in a tip if you can get the suggestions coming up repeatedly (right now they stop displaying after the first suggestion is consumed).

awarded to kostasx

Crowdsource coding tasks.

4 Solutions


Currently I am working on this
BUT...
I have another awsome idea
There is a library on js called Awesomcomplet
The HTML5 datalist element is possibly the simplest way to implement an autocomplete feature in a website. Unfortunately, browser support for this element is limited and it’s implementation is inconsistent (e.g. Chrome matches only from the start, Firefox anywhere). It’s also not possible to style it according to your website’s design and, although promising, it’s probably not the right choice yet.

Awesomplete, on the other hand, is an ultra lightweight, customizable autocomplete widget, which you can drop into your pages. It has zero dependencies (no jQuery), works across all modern browsers and can be styled according to your website’s theme.

To use the Awesomplete library we need two files: awesomplete.css and awesomplete.js.

You can get these using bower:

bower install https://github.com/LeaVerou/awesomplete.git#gh-pages
By downloading them from the Awesomplete website directly.

Or, by including them via the RawGit CDN (which serves raw files directly from GitHub with proper Content-Type headers). This is demonstrated below.

To instantiate the basic widget, you need an input element with a class of awesomplete, followed by the assosciated options in a datalist element. The list attribute of the input element must match the id of the datalist element. This is a sensible default configuration, as it offers a fallback to any users with JavaScript disabled.

<!doctype html>







One
Two
Three

<script src="https://cdn.rawgit.com/LeaVerou/awesomplete/gh-pages/awesomplete.min.js"></script>

Basic Functionality
There are many ways to use this versatile library. Let’s start with a basic use case.

Using the data-list Attribute
It is possible to move the options from the aforementioned datalist element into a data-list attribute on the input element itself.

Using JavaScript
The above solutions are useful if your autocomplete options are static. However. to create the list dynamically and further customize the behavior of the autocomplete widget, we need a JavaScript method.

var input = document.getElementById("countries");
var awesomplete = new Awesomplete(input, {
minChars: 1,
maxItems: 5,
autoFirst: true
});
awesomplete.list = ["China", "India", "Japan", "Russia", "UK", "USA"];

Here we are creating a Awesomplete object, passing it two parameters: a reference to our input element, and an object literal containing the configuration options.

We then assign the list property of our Awesomplete object to an array holding the list of the autocomplete options. In the demo below, I have expanded the array of country names, using this handy snippet.

Also, note that the minChars, maxItems and autoFirst properties are same as the data-minchars, data-maxitems and data-autofirst attributes in the previous demo.

Thanks a lot for the tip, will check out awesomplete now. The only thing is it has to work with contenteditable (because I already have an app building off a contenteditable div)
jkhaui 22 days ago

You can also make a eventlistner that when tab is TAPED you call the cursor function

Yeah, what I'm doing right now is editing the autoComplete.js library files directly, as that gives the most control. I checked out awesomplete, looks good but unfortunately doesn't seem to work with contenteditable :( Also, I prefer autoComplete.js for its ES6 syntax
jkhaui 22 days ago

Will I get bounty?

Sorry, I had to award it to kostasx because I am sticking with this library and he managed to solve the main issue. But I appreciate you looking into it
jkhaui 21 days ago
Winning solution
Tipped

My take here: https://codepen.io/kostasx/pen/KONBKP?editors=0010

Contains the autoComplete.js with some minor modifications.

Beautiful. Bounty awarded. Thanks heaps
jkhaui 21 days ago
Thank you :)
kostasx 21 days ago
View Timeline