I'm using the autocomplete plugin by Andrew Whitaker, also referenced in this question: jquery autocomplete @mention

This doesn't work if I use a contenteditable div instead of a textarea. Here's my code:

<div id="MyText" contenteditable="true"></div>​

$("#MyText").bind("keydown", function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    }).autocomplete({
        minLength: 0,
        source: function (request, response) {
            var term = request.term,
                results = [];
            if (term.indexOf("@") >= 0) {
                term = extractLast(request.term);
                if (term.length > 0) {
                    results = $.ui.autocomplete.filter(tags, term);
                } else {
                    results = [startTyping];
                }
            }
            response(results);
        },
        focus: function () {
            return false;
        },
        select: function (event, ui) {
            if (ui.item.value !== startTyping) {
                var terms = this.value.split(' ');
                terms.pop();
                terms.push("@" + ui.item.value + "</span>");
                this.value = terms.join(" ");
            }
            return false;
        }
    }).data("autocomplete")._renderItem = function (ul, item) {
        if (item.label != startTyping) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a><div><img src='" + item.icon + "'/></div><div>" + item.label + "</div></div></a>")
                .appendTo(ul);
        } else {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.label + "</a>")
                .appendTo(ul);
        }
    };

Any thoughts?

I'm using the autocomplete plugin by Andrew Whitaker, also referenced in this question: jquery autocomplete @mention

This doesn't work if I use a contenteditable div instead of a textarea. Here's my code:

<div id="MyText" contenteditable="true"></div>​

$("#MyText").bind("keydown", function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    }).autocomplete({
        minLength: 0,
        source: function (request, response) {
            var term = request.term,
                results = [];
            if (term.indexOf("@") >= 0) {
                term = extractLast(request.term);
                if (term.length > 0) {
                    results = $.ui.autocomplete.filter(tags, term);
                } else {
                    results = [startTyping];
                }
            }
            response(results);
        },
        focus: function () {
            return false;
        },
        select: function (event, ui) {
            if (ui.item.value !== startTyping) {
                var terms = this.value.split(' ');
                terms.pop();
                terms.push("@" + ui.item.value + "</span>");
                this.value = terms.join(" ");
            }
            return false;
        }
    }).data("autocomplete")._renderItem = function (ul, item) {
        if (item.label != startTyping) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a><div><img src='" + item.icon + "'/></div><div>" + item.label + "</div></div></a>")
                .appendTo(ul);
        } else {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.label + "</a>")
                .appendTo(ul);
        }
    };

Any thoughts?

• javascript
• jquery-ui
• jquery-plugins
• jquery

• 1 have you check this question ? – yosafatade Commented Nov 10, 2012 at 18:39
• Thanks, I checked it. It solves half my problem. The issue is that when I select the item from the list, it doesn't get added to the div. – Prabhu Commented Nov 10, 2012 at 19:27
• As of 2019, the answer seem outdated, with the browser console logging a TypeError. jQuery has a better, modern example – Brad Solomon Commented Jul 12, 2019 at 16:38

2 Answers 2

The main difference between an input/textarea and a contenteditable div is that you access the latter content with the .html() method (instead of the .value or .val() method.

Here is the autocomplete code:

$("#MyText")
    .bind("keydown", function (event) {
        if (event.keyCode === $.ui.keyCode.TAB && $(this).data("autocomplete").menu.active) {
            event.preventDefault();
        }
    })
    .autocomplete({
        minLength: 0,
        source: function (request, response) {
            var term = request.term,
                results = [];
            if (term.indexOf("@") >= 0) {
                term = extractLast(request.term);
                if (term.length > 0) {
                    results = $.ui.autocomplete.filter(tags, term);
                } else {
                    results = [startTyping];
                }
            }
            response(results);
        },
        focus: function () {
            return false;
        },
        select: function (event, ui) {
            if (ui.item.value !== startTyping) {
                var value = $(this).html();
                var terms = split(value);
                terms.pop();
                terms.push(ui.item.value);
                $(this).html(terms.join("@"));
                placeCaretAtEnd(this);
            }
            return false;
        }
    })
    .data("autocomplete")._renderItem = function (ul, item) {
        if (item.label != startTyping) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a><div>" + item.label + "</div></div></a>")
                .appendTo(ul);
        } else {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.label + "</a>")
                .appendTo(ul);
        }
    }
;

EDIT(2): Here is the link to the jsfiddle

Above example was not working See this http://jsfiddle.net/ipsjolly/jYJjJ/29/

select: function (event, ui) {

            var value = $(this).html();
            var terms = split(value);
            terms.pop();
            terms.push(ui.item.value);
            $(this).html(terms+", ");
            placeCaretAtEnd(this);

        return false;
    }