Question

I am wondering how to make jquery append autocomplete choice to textbox when moving with arrows or pressing enter on choie instead of replacing the whole text in the text box?
Here is my code so far:

Server Side:

public ActionResult Autocomplete(string lang, string query)
        {
            try
            {
                var term = query.IndexOf(',') > 0 ? query.Substring(query.LastIndexOf(',') + 1).ToLower() : query.ToLower();
                if (!String.IsNullOrWhiteSpace(term))
                {
                    var data = context.Tags.Where(s => s.Name.StartsWith(term)).Select(x => x.Name).Take(5).ToArray();
                    return Json(data);
                }
                return Json(new string[] { });
            }
            catch
            {
                return Json(new string[] { });
            }
        }

Client-side:

 <script type="text/javascript">  
  var tagsautocomplete = '@("/" + Url.RequestContext.RouteData.Values["lang"])/pictures/autocomplete';
    </script>

 $("#submit_picture_tags").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: tagsautocomplete, type: "POST", dataType: "json",
                data: { query: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item, value: item };
                    }))
                }
            })
        },
        minLength: 1,
    }); 

Answer 1

You can do this by adapting the multiple values demo on jQueryUI’s website.

You’ll probably end up with something like this:

function split(val) {
    return val.split(/@\s*/);
}

function extractLast(term) {
    return split(term).pop();
}

$("#submit_picture_tags").autocomplete({
    source: function (request, response) {
        var term = extractLast(request.term);
        $.ajax({
            url: tagsautocomplete, 
            type: "POST", 
            dataType: "json",
            data: { query: term },
            success: function (data) {
                response($.map(data, function (item) {
                    return item;
                }));
            }
        });
    },
    focus: function () {
        return false;
    },
    select: function (event, ui) {
        var terms = split(this.value);

        // remove the current input
        terms.pop();
        // add the selected item
        terms.push(ui.item.value);
        // add placeholder to get the comma-and-space at the end
        terms.push("");
        this.value = terms.join(", ");
        return false;
    },
    minLength: 1
});

I obviously can’t provide a working example with your datasource, but here’s a similar example with a remote datasource that might help: http://jsfiddle.net/RVkjV/