Question

I need some help here. I am using razor view in MVC3. I have a search bar with autocomplete feature that is working fine. Now as per the req. I need to create a radio button beside search text box and based on the radio button values selected I need to get the autocomplete text from different tables. It’s because, my index page view has 3 different webgrid listing. so, search should act based on what the user intend to search by specifying the option in the parameter as radio button.

I have my regular jQuery code here:

$(document).ready(function () {
    $(":input[data-autocomplete]").each(function () {
        $(this).autocomplete({ source: $(this).attr("data-autocomplete") });
    })
})*  

I modified the above to pass second parameter :-

$(document).ready(function () {

    var radioval = $("#form0").find("input[type=radio]").attr("value");
    $(":input[data-autocomplete]").each(function (request) {
        var srctxt = $(this).attr("value");
        $(this).autocomplete({
            source: "/Facility/FindNames/?term = " + $(this).attr("value") + "&stype = " + radioval
        });
    })
})

My intention is to pass the second parameter search type which is a radio button group and then in the controller below based on the value passed change the query to select from different tables.

–Controller Method

 public JsonResult FindNames(string term, string stype)
    {

        string radioValue = null;

        var result = _service.GetAllFacility()
                    .Where(r => r.FacilityName.Contains(term))
                    .Take(10)
                    .Select(r => new { label = r.FacilityName });

        return Json(result, JsonRequestBehavior.AllowGet);
    }

however the value of stype is always coming as null. Using firebug I can see it does have value. Can someone tell me what is wrong with my code? What is the best way to implement this kind of search feature?

Answer 1

You could handle the source function as follows to pass multiple parameters

var radioval = $("#form0").find("input[type=radio]").attr("value");
$(":input[data-autocomplete]").each(function() {

     $this = $(this);
     var srctxt = $this.val();
     $this.autocomplete({
          source: function (request, response) {
             $.getJSON('/Facility/FindNames/',
             {
                stype: radioval,
                term: srctxt
             }, response);
          }
     });
})