Question

I am using jQuery autocomplete with MVC3 and Razor engine and it is able to retrieve my list from my actionResult. However when I click on an item in the autocomplete list there is always a comma at the end.

HTML

<div class="editor-field">
    @Html.EditorFor(model => Model.group_name, new { ID = "group_name" })
    @Html.ValidationMessageFor(model => Model.group_name)
</div>

JS

<script type="text/javascript">
    $(document).ready(function () {
        $("#group_name").autocomplete('@Url.Action("LookUpGroupName")', // Call LookUpGroupName ActionResult in UserManager Controller
        {
        dataType: 'json',
        parse: function (data) {
            var rows = new Array();
            for (var i = 0; i < data.length; i++) {
                rows[i] = {
                    data: data[i],
                    value: data[i].group,
                    result: data[i].group
                }
            }
            return rows;
        },
        formatItem: function (row, i, max) {
            return row.group
        },
        width: 300,
        highlight: false,
        multiple: true
        //        multipleseparator: ","
    }); // End of autocomplete
});
</script>

Response body of my request from typing the letter a

[{"group":"A Tout France"},{"group":"Abba Blinds"},{"group":"Aberdeen Journals"},{"group":"Account suspended South West Media Group"},{"group":"Acumen Marketing Communications"},{"group":"Acumen Partners"},{"group":"adz media ltd"},{"group":"Aka Ltd"},{"group":"AL Marketing Communications"},{"group":"Alchemy Direct Media"}]

If I select A Tout France from using my autocomplete the value in the textbox will be:

A Tout France,

Any idea how to get rid of the trailing comma?

Answer 1

multiple: true 

Adds a comma for every item selected which isn’t explained anywhere in the documentation. Hopefully this saves someone hours of time wasting.