AutoComplete Multiple Values, Preserve LineBreak

Question

I am using the code from the jQuery UI example for multiple values. When I try to put a line break in, it will let me, but then when I try to add a new item, it removes the line break. How can I preserve line breaks?

Ref. http://jqueryui.com/autocomplete/#multiple

    function split(val) {
        return val.split(/\s\s*/);
    }
    function extractLast(term) {
        return split(term).pop();
    }
    function formatItem(item) {
        return item.substr(item.indexOf(" ") + 1);
    }

    $("#propertyInfo, #legalDesc, #taxes, #additionalTaxes, #mortgagesLiensCourt, #additionalMatters")
     .addClass('shiftTabClass')
     .bind("keydown", function (event) {
         if (event.keyCode === $.ui.keyCode.TAB &&
         $(this).data("ui-autocomplete").menu.active) {
             event.preventDefault();
         }
     })
     .autocomplete({
         source: function (request, response) {
             // delegate back to autocomplete, but extract the last term
             var term = extractLast(request.term);
             var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
             //response($.grep(availableTags, function (item) {
             response($.grep(textCodes[this.element.attr('id')], function (item) {
                 return matcher.test(item);
             }));
         },
         focus: function () {
             // prevent value inserted on focus
             return false;
         },
         minLength: 1,
         select: function (event, ui) {
             var terms = split(this.value);
             // remove the current input
             terms.pop();
             // add the selected item
             terms.push(formatItem(ui.item.value));
             // add placeholder to get the comma-and-space at the end
             terms.push("");
             this.value = terms.join("  ");
             return false;
         }
     });

Edit:

Doing this kind of gets me what I want, but it adds the search text, i.e. if I type "ja" and click "Java," it not only adds "Java" but it adds "jaJava." If I can remove the search term from the $(this).val(), I may have what I want... Anyone know how to do that?

select: function (event, ui) {
     $(this).val($(this).val() + ui.item.value);
     return false;
}

Answer 1

I was able to get what I want with this code, but there may be room for improvement...

    function removeLastInstance(badtext, str) {
        var charpos = str.lastIndexOf(badtext);
        if (charpos < 0) return str;
        ptone = str.substring(0, charpos);
        pttwo = str.substring(charpos + (badtext.length));
        return (ptone + pttwo);
    }

    var sTerm;

    $("#propertyInfo, #legalDesc, #taxes, #additionalTaxes, #mortgagesLiensCourt, #additionalMatters, #abstractorComments")
     .addClass('shiftTabClass')
     .bind("keydown", function (event) {
         if (event.keyCode === $.ui.keyCode.TAB &&
         $(this).data("ui-autocomplete").menu.active) {
             event.preventDefault();
         }
     })
     .autocomplete({
         source: function (request, response) {
             // delegate back to autocomplete, but extract the last term
             var term = extractLast(request.term);
             sTerm = term;
             var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
             //response($.grep(availableTags, function (item) {
             response($.grep(textCodes[this.element.attr('id')], function (item) {
                 return matcher.test(item);
             }));
         },
         focus: function () {
             // prevent value inserted on focus
             return false;
         },
         minLength: 1,
         select: function (event, ui) {
             /*
             var terms = split(this.value);
             // remove the current input
             terms.pop();
             // add the selected item
             terms.push(formatItem(ui.item.value));
             // add placeholder to get the comma-and-space at the end
             terms.push("");
             this.value = terms.join("  ");
             return false;
             */
             console.log(sTerm);
             $(this).val(removeLastInstance(sTerm, $(this).val()) + ui.item.value);
             return false;
         }
     });