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.

Of course this is possible, you just need to make sure AutoCompleteCustomer returns data in this format. Is there more specific question here? — Andrei
– Andrei, Commented Oct 27, 2016 at 12:03
Do you have a code snippet just for the jquery ui part, how I would display the data there? The return of the right format of my Method is of course my duty. — RawMVC
– RawMVC, Commented Oct 27, 2016 at 12:05
There is no need for a snippet. I posted an answer to explain — Andrei
– Andrei, Commented Oct 27, 2016 at 12:11

Andrei · Accepted Answer · 2016-10-27 12:14:53Z

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.

edited Oct 27, 2016 at 12:14

answered Oct 27, 2016 at 12:11

Andrei

56.8k10 gold badges92 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RawMVC Over a year ago

Thanks for that wonderful example, I will try to do it this way and if my solution is ready or I have anymore questions, I will post them here :)

Andrei Over a year ago

@RawMVC, sure, although if your new questions are of a different nature I would advise posting a separate topics for them. The SO policy is "one question per thread"

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related