jQuery autocomplete - Uncaught TypeError: undefined is not a function

Question

I'm trying to add the jquery autocomplete on my search-textbox, but for some reason I can't get it to work. It looks like I have all neccesary jquery loaded and no differences in versions. I've tried every (atleast the one I've found) suggested solution, but none of them have worked.

my html:

 <input type="search" name="searchTerm" 
data-test-autocomplete="@Url.Action("AutoComplete")" />

my js:

$(function() {
  var createAutoComplete = function() {
    var $input = $(this);

    var options = {
      source: $input.attr("data-test-autocomplete")
    };

    $input.autocomplete(options);
  };


  $("input[data-test-autocomplete]").each(createAutoComplete);

});

bundle being called inside the _Layout.cshtml at the end of the body:

  bundles.Add(new ScriptBundle("~/bundles/test").Include(
              "~/Scripts/jquery-{version}.js",
              "~/Scripts/jquery-ui-{version}.js",
              "~/Scripts/jquery.unobtrusive*",
              "~/Scripts/jquery.validate*",
              "~/Scripts/test.js"));

Scripts being loaded:

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/test.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

Thanks in advance.

90% from jquery Errors gives :undefined is not a function .. What is undefined? .. Please click on the undefined in console to see where is the error — Mohamed-Yousef
– Mohamed-Yousef, Commented Jan 2, 2015 at 1:49
@Mohamed-Yousef, the error is given at the line: "$input.autocomplete(options);" in the test.js file. When I check $input in console it returns "<input type="search" name="searchTerm" data-tyrant-autocomplete="/Test/AutoComplete">". When entering "$input.autocomplete(options);" in console, it returns the error: "TypeError: undefined is not a function" — Rob
– Rob, Commented Jan 2, 2015 at 1:59

JotaBe · Accepted Answer · 2015-01-02 10:26:53Z

3

What is undefined is clearly .autocomplete jQuery function. Please, see that in the "Scripts being loaded" part of your question jQuery UI is completely missing.

You're correctly including it in your bundle, as "~/Scripts/jquery-ui-{version}.js" so the only possible explanation for the failure is that the jQuery UI script file is missing from that route (or that you're rendering the worng bundle in your layout or view Razor code).

answered Jan 2, 2015 at 10:26

JotaBe

39.3k9 gold badges102 silver badges121 bronze badges

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

2 Comments

Rob Over a year ago

Not sure how I missed that.. Thanks so much for pointing this out.

JotaBe Over a year ago

Perhaps because it's the first working day of the year, after some party ;) It's not unusual that we try to find the problem where it isn't. An advice for next time: when you get an undefined error, try to discover what is undefined. If you get this error in a function call, type in the console the function name without parentheses, i.e. $input.autocomplete and you'll get undefined and discover that the function itself is missing for some reason

Collectives™ on Stack Overflow

jQuery autocomplete - Uncaught TypeError: undefined is not a function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related