jQuery autocomplete - TypeError: autocomplete is not a function in asp.net mvc 5

Question

I'm trying to add the jquery autocomplete on my dropDownList with the @url.action, but for some reason it doesn't work. It looks like I have all neccesary jquery loaded. I've tried everything (at least the one I've found in the site or in google).

My HTML + js:

<input id="test" name="test" />

@section scripts
{

@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/autocomplete.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#test').autocomplete({
            source: '@Url.Action("GetCitiesForAutocomplete", "Students")'

        });
    });
</script>
}

My Controller Students:

    public JsonResult GetCitiesForAutocomplete(string term)
    {
        return Json(GetCities()
                    .Where(x=>x.Text.ToLower()
                    .Contains(term.ToLower())), JsonRequestBehavior.AllowGet);
    }

    private List<SelectListItem> GetCities()
    {
        return new List<SelectListItem> 
        {
            new SelectListItem {Text = "Jerusalem", Value = "0"},
            new SelectListItem {Text = "Haifa", Value = "1"},
            new SelectListItem {Text = "Tel Aviv", Value = "2"},
            new SelectListItem {Text = "Katzrin", Value = "3"},
            new SelectListItem {Text = "Beer Sheva", Value = "4"},
            new SelectListItem {Text = "Netanya", Value = "5"}     
        };
    }

My question is: How i do autocomplete in my dropdownlist only with the text in list.

For ex: If i have press on 'je' -> i get 'Jerusalem'

If i have press on 'te' -> i get 'Tel Aviv'

Thanks.

I think you need to pull the result of @Url.Action("GetCitiesForAutocomplete", "Students") into a JSON object and use that as the source. As it appears, you have autocomplete dong filtering as well as the JSON method. — Mark Schultheiss
– Mark Schultheiss, Commented Feb 22, 2016 at 21:31

Mihir Solanki · Accepted Answer · 2016-02-22 17:39:07Z

1

Change the GetCitiesForAutoComplete method to return all cities. Autocomplete will handle the filtering.

public JsonResult GetCitiesForAutocomplete()
{
    return Json(GetCities(), JsonRequestBehavior.AllowGet);
}

answered Feb 22, 2016 at 17:39

Mihir Solanki

3331 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

jQuery autocomplete - TypeError: autocomplete is not a function in asp.net mvc 5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related