jQuery自动完成 - 未捕获TypeError：undefined不是函数

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.

Answer 1

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).