StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POMVC3 jQuery Autocomplete - User must select option, ID of option sent to server
primarykey
Id
11125734
data
AcceptedAnswerId
11165155
AnswerCount
2
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2012-06-20T18:19:52.150
FavoriteCount
2
LastActivityDate
2014-02-10T12:41:02.153
LastEditDate
2014-02-10T12:41:02.153
LastEditorUserId
1373162
OwnerUserId
1373162
ParentId
0
PostTypeId
1
Score
2
ViewCount
3909
LastEditorDisplayName
text
Body
Background Currently in a project of mine I am using jQuery <code>autocomplete</code> for a few fields. To provide context, the application records <code>Runs</code>. Each <code>Run</code> must have a <code>Route</code> associated with it. A <code>Route</code> meaning, where the user ran. When the user types in a <code>Route</code>, a list of their <code>Routes</code> gets displayed by the <code>autocomplete</code> options, but the database requires the <code>RouteID</code> for validation. To compensate for this, I stored the <code>RouteID</code> in a <code>HiddenFor</code> HtmlHelper. When the user selects the route from the <code>autocomplete</code>, the <code>HiddenFor</code> gets assigned. What my problem is If the user types in the full name of the <code>Route</code>, instead of selecting it from the <code>autocomplete</code> list or enters a <code>Route</code> that does not exist, the <code>HiddenFor</code> will not get assigned. When this happens, I have to find the <code>Route</code> by its name and validate that it exists on the server. I would like to not have to create this work-around for every <code>autocomplete</code>. The bottom line Is there anyway to make the <code>autocomplete</code> act more like a <code>select list</code>? I want the user to have no choice but to select the text of one option from the <code>autocomplete</code> list, and have the value of the selected option is sent to the server. If I have to stick to the <code>HiddenFor</code> method, is there at least a way to force the user to select an option from the <code>autocomplete</code> list? <hr> Below is the code I am currently using Mark-up <pre><code>@Html.LabelFor(model => model.RouteID, "Route") <input type="text" data-autocomplete-url="@Url.Action("../Route/GetRoutesByUser")" /> @Html.HiddenFor(m => m.RouteID) </code></pre> <hr> jQuery <pre><code> $('*[data-autocomplete-url]') .each(function () { $(this).autocomplete({ source: $(this).data("autocomplete-url"), minLength: 2, select: function (event, ui) { log(ui.item.id, ui.item.name); } }); }); </code></pre> <hr> Code <pre><code>public ActionResult GetRoutesByUser(string term) { var routeList = db.Routes.Where(r => r.Name.Contains(term)) .Take(5) .Select(r => new { id = r.RouteID, label = r.Name, name = "RouteID"}); return Json(routeList, JsonRequestBehavior.AllowGet); } </code></pre>
Tags
<jquery><asp.net><asp.net-mvc><asp.net-mvc-3><jquery-ui-autocomplete>
Title
MVC3 jQuery Autocomplete - User must select option, ID of option sent to server
singulars
PostAcceptedAnswerId
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USDavid East
UserOwnerUserId
1. USDavid East
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
 singulars
 PostTypePostTypeId
 PTAnswer
2. PO
 singulars
 PostTypePostTypeId
 PTAnswer
VotesPostIdCreationDate
1. VO
 singulars
 PostPostId
 POMVC3 jQuery Autocomplete - User must select option, ID of option sent to server
 UserUserId
 UShuynhtuanh
 VoteTypeVoteTypeId
 VTFavorite
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.