Question

I’ve been trying to use this plugin -> http://code.drewwilson.com/entry/autosuggest-jquery-plugin (broken link, see github), but i’ve been having some problems.

Here’s what my view looks like.

<span>
    <label for="registrars">Registrar</label>
    <input id="registrars" type="text" name="registrars" />
</span>

<script type="text/javascript">
         $(function () {

              var data = { items: @Html.Action("GetRegistrars", new { area = "Registrar", controller = "Home", organizationId = "0007511"}) };
         $("#registrars").autoSuggest(data.items, { selectedItemProp: "name", searchObjProps: "name" });

         });
    </script>

Here’s my controller

[HttpGet]
    public ActionResult GetRegistrars(string organizationId)
    {
        var registrars = _registrationService.GetRegistrarBy(r => r.Id== organizationId)
            .Select(s => new { 
                    id = s.ID,
                   name = s.Name
            }).ToList();

        return new JsonResult
        {
            Data = registrars,
            JsonRequestBehavior = JsonRequestBehavior.AllowGet,
            ContentType = "application/json"
        };

    }

When I browse to the view this is contained on instead of seeing the page i see the raw html for the entire view.

By the way when i browse to the url http://localhost/Registrar/Home/GetRegistrar?organizationId=0007511 here’s what i get back.

[{"id":"000641","name":"TELSER, KAREN L"},{"id":"001195","name":"ALLRED, NANCY J"},{"id":"001196","name":"ANDERSON, NANCY L"},{"id":"001197","name":"BRENNER, SUSAN RICH"},{"id":"001198","name":"BRUGGER, BETTY O"},{"id":"001200","name":"ELSASS, JUDITH W"}]

Thanks for any help!

Answer 1

I use it a little differently…This may work for you too.
Instead of trying to render out all of the Registrars onto the page in an array and then getting the autosuggest work off that array, I pass it the URL to an action method that returns Json data..

In this example im using a Url Helper to build the Url, but you could just hard code it if you want.

      $(document).ready(function () {
         $("#autosuggest").autoSuggest(
                     "@Url.Blogging().Posts().FindCategories()",
                    {   
                    minChars: 2,
                    selectedItemProp: "name",
                    searchObjProps: "name",
                    asHtmlID: 'Categories' 
                    }
            );
    }); 

Here is the JsonResult that brings back the data.

    public JsonResult FindCategories(string q)
    {
        var results = Services.Post.FindCategories(q);
        var model = Mapper.Map<IEnumerable<Category>, IEnumerable<AutoSuggestViewModel>>(results);
        return Json(model, JsonRequestBehavior.AllowGet);
    }

Hope this helps.