Question

I have an app where the user types a word and an autocomplete appears. When the select the appropriate autocomplete, it’s added to the input field and the user keeps typing. I would very much like to highlight that word in the input box (not in the autocomplete list) and have the rest of the words in the box not appear highlighted, but I can’t find any examples of this.

$(searchBoxId).autocomplete({
    source:      keys,
    delay:       0,
    selectFirst: true,
    select:      function(event, ui) {
        var TABKEY = 9;
        this.value = ui.item.value;

        if (event.keyCode == TABKEY) {
            event.preventDefault();
            this.value = this.value + " ";
            // XXX something goes here?
            this.focus();
        }

        return false;
    },
    autoFocus: true,
    minLength: 2
});

This is jquery 1.8.20. By “highlight”, I mean “able to make it look visually distinct in a manner similar to how Facebook or Google+ can highlight usernames”.

Answer 1

Since you’re already using jQuery, you might want to look at using something like jQuery Tags.

It supports autocomplete and does the data-differentiation you’re looking for.

The basic concept is though that you take your text box and make it a div with the contenteditable flag set. Listen for keypress events — specifically the space bar and the enter key. When they’re hit, you grab the most recently entered text (that already isn’t “tagged”) and create a <div> and append it.

Or just use the plugin…