ASP.NET MVC jquery autocomplete with value and text field

Question

controller

public ActionResult Search(string id)
{
     id= Request.QueryString["term"];         
     var routeList = db.Movies.Where(r => r.Title.Contains(id))
                   .Take(5)
                   .Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
     return Json(routeList, JsonRequestBehavior.AllowGet);
}

View:

<input type="hidden"   id="MovieID"  name="MovieID" />
<input type="text" id="SelectedMovie" value=""/>
<script type="text/javascript" language="javascript">
   $("#SelectedMovie").autocomplete({
       source: function (request, response) {
           $.ajax({
              url: "/Transaction/Search", type: "POST", dataType: "json",                        
              data: { id: request.term }, 
              success: function (data) {
              response($.map(data, function (item) {                                
                return { label: item.label, value: item.id }; //updated code
               }));
             }
         });
     },
     select: function (event, ui) {
         $("#MovieID").val(ui.item.value);
         $("#SelectedMovie").val(ui.item.label);
         return false;
     }
  });
</script>

I have some kind of videostore app. When I go to rent a movie I need a combobox with movies which I can select by using autocomplete. Also requirement is that only ID (value) is saved to the databas and not the text itself.

EDIT: here is the full working exqample

1st please tell me if my controller is OK ? when I run it manually I get no results , search term (id) is passed as null ?? — Jalle
– Jalle, Commented Sep 20, 2012 at 11:25
I would expect to pass request.term NOT request.id to the $.ajax() call. — JoeFletch
– JoeFletch, Commented Sep 20, 2012 at 11:27

शेखर · Accepted Answer · 2014-12-22 05:40:54Z

20

Since you are passing only a string to the Search() function on the server side, the data elements that you are passing via the $.ajax() call need to be changed.

public ActionResult Search(string id)//I think that the id that you are passing here needs to be the search term. You may not have to change anything here, but you do in the $.ajax() call
{
      id= Request.QueryString["term"];

      var routeList = db.Movies.Where(r => r.Title.Contains(id))//this is a text filter no?
                        .Take(5)
                        .Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
      return Json(routeList, JsonRequestBehavior.AllowGet);
}

$("#MovieID").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Transaction/Search", type: "POST", dataType: "json",
            //original code
            //data: { searchText: request.id, maxResults: 10 },
            //updated code; updated to request.term 
            //and removed the maxResults since you are not using it on the server side
            data: { id: request.term },

            success: function (data) {
                response($.map(data, function (item) {
                    //original code
                    //return { label: item.FullName, value: item.FullName, id: item.TagId }; 
                    //updated code
                    return { label: item.label, value: item.label, id: item.id };
                }));
            },
        select: function (event, ui) {
                //update the jQuery selector here to your target hidden field
            $("input[type=hidden]").val(ui.item.id);
        }
        });
    },
});

Let me know if this works/helps!

edited Dec 22, 2014 at 5:40

शेखर

17.6k14 gold badges64 silver badges123 bronze badges

answered Sep 20, 2012 at 12:41

JoeFletch

3,9991 gold badge30 silver badges39 bronze badges

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

5 Comments

Jalle Over a year ago

OK this works. but instead of showing ID in same field i need to save it in hidden one. please help

JoeFletch Over a year ago

@Jalle, my answer has been updated to reflect the changes that you need. Let me know if this helps!

Luis Gouveia Over a year ago

@JoeFletch, everything is working as expected except that the event is not triggered when I select the value on the drop. I have placed my debugger inside the 'select: function (event, ui) {' but the compiler never reaches there. Do you have any idea concerning what might be wrong?

JoeFletch Over a year ago

@LuisGouveia not a clue. I do not have any of your code posted, so I do not know your circumstances.

Luis Gouveia Over a year ago

@JoeFletch thank you but I figured it out myself a couple of days after my comment. I am sorry that I didn't tell you.

Chandan Kumar · Accepted Answer · 2016-08-11 13:16:53Z

4

Your .ajax() call is not specifying in an id. it's not in your data{} object, nor is it in a querystring as part of the url parameter (either approach would work).

Hence the null value in your Action method.

Anyway, you are immediately over-writing the method's id argument with Request.QueryString["term"]. Why to do that??

Instead of asking Request for the 'term' inside the method,you just bind that to the Action method as a parameter itself like below :

public ActionResult Search(string term)
{
    var routeList = db.Movies.Where(r => r.Title.Contains(term))
            .Take(5)
            .Select(r => new { id = r.MovieID, label = r.Title, name = "MovieID" });
    return Json(routeList, JsonRequestBehavior.AllowGet);
}

edited Aug 11, 2016 at 13:16

Chandan Kumar

4,6228 gold badges45 silver badges63 bronze badges

answered Sep 20, 2012 at 11:51

Faust

15.5k10 gold badges58 silver badges116 bronze badges

Comments

Ronald Wildenberg · Accepted Answer · 2012-09-20 11:52:04Z

3

First, you should use the following return value from your function:

return { label: item.title, value: item.id };

According to the documentation you have to return objects with label and value properties (no id property). The label is what the user sees, the value is what's posted to the server.

Second, you pass a searchText and maxResults in the Ajax call, so your action method should have two parameters: public ActionResult Search(string searchText, int maxResults).

Can you apply these changes and see if it works?

edited Sep 20, 2012 at 11:52

answered Sep 20, 2012 at 11:17

Ronald Wildenberg

32.3k17 gold badges95 silver badges133 bronze badges

1 Comment

Ronald Wildenberg Over a year ago

Hadn't even noticed that one. When the property names differ it definitely isn't going to work.

Collectives™ on Stack Overflow

ASP.NET MVC jquery autocomplete with value and text field

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related