ASP.NET MVC: Output format of jQuery UI Autocomplete (display value label key pairs)

Question

I have the following idea, but I can't find any code snippets or similiar examples so I don't know if it's possible to do it with jQuery UI. So in my database I have a table, in which every customer has an ID and Name:

ID        Name
1         John Example
2         Johnny Example

What I want to do now is, if the user types Joh it should show him the entries in the following way:

John Example - 1
Johnny Example - 2

So my question: is it possible at all to do a display like that for my autocomplete function?

My code for the view and autocomplete function at the moment looks like this and displays only the name of the customer:

<script>
    $("#CustomerName").autocomplete({
        source: "/Customer/AutoCompleteCustomer",
        minLength: 2
    })
</script

Thanks and if you need any further information, please let me know, I will provide it as fast as possible.

Answer 1

Let's look at jQuery docs :

There are two supported formats:

• An array of strings: [ "Choice1", "Choice2" ]
• An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ...]

and later, when talking about making request to server for data

For example, if the source option is set to " http://example.com " and the user types foo, a GET request would be made to http://example.com?term=foo . The data itself can be in the same format as the local data described above. The label property is displayed in the suggestion menu.

So, as long as your server takes care to return data as either a string array:

["John Example - 1", "Johnny Example - 2"]

or an object array:

[{label: "John Example - 1", value: "1"}, {label: "Johnny Example - 2", value:"2"}]

jQuery autocomplete will be able to pick it up and display it the way you need.