jQuery autocomplete continuation instead of replace

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,
    });

This is exactly what you are looking for, a tagging plugin(s) that work with autocomplete, and append it to the textbox current value: http://stackoverflow.com/questions/519107/jquery-autocomplete-tagging-plug-in-like-stackoverflows-input-tags — Mohammed Swillam, Sep 15 '12 at 15:12
Does this question help at all? http://stackoverflow.com/q/7089406/497356 — Andrew Whitaker, Sep 15 '12 at 15:41

score 3 · Accepted Answer · answered Sep 15 '12 at 15:14

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/

I can see it clearly working on your example, but same thing happens to me as before, even with your code. Can this be due to watermark plugin or validation? — formatc, Sep 15 '12 at 16:00

score 0 · Answer 2 · answered Sep 15 '12 at 14:56

0

I'm not sure if this is what you are looking for, but there is an appendTo option on jquery ui autocomplete

http://jqueryui.com/demos/autocomplete/#option-appendTo

answered Sep 15 '12 at 14:56

Phil-R

2,103
16
20

1

The `appendTo` option specifies what element on the page to append the suggestions menu to. I don't think this is what the OP is looking for. – Andrew Whitaker Sep 15 '12 at 15:16

jQuery autocomplete continuation instead of replace

2 Answers2

Linked