javascriptjqueryjquery-ui-autocomplete

$(...).autocomplete is not a function Error occurs when the page is load


In my web application, I have added a text box and I wanted to search for data and show it while typing on it.

So I followed this video and added the same to my project. https://www.youtube.com/watch?v=k5v8a575QX0

But when the page loads, I got this error in the console.```$(...).autocomplete is not a function``

I have to google it and found some jquery libraries are missing so I downloaded the files and included them in my project and then mapped them to it from the view.

But still, the error is the same.


<link href="~/Addons/css/select2.min.css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<link href="~/Addons/autocomplete/css/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.6.4.min.js"></script>
<script src="~/Addons/autocomplete/js/jquery-ui.js"></script>


<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="~/Addons/js/select2.full.min.js"></script>
  <div class="col-md-6">
    <input type="text" placeholder="Type the Item Name or Number Here" class="form-control" id="itemSerachBox" />
  </div>

$(function () {
  $("#itemSerachBox").autocomplete({
    sourse: function (request, response) {
      $.ajax({
        url: '@Url.Action("GetSearchItems","Ajax")',
        dataType: "json",
        data: {
          search: $("itemSerachBox").val()
        },
        success: function (data) {
          response($.map(data, function (item) {
            return {
              label: item.ItemName_Number,
              value: item.ID
            };
          }));
        },
        error: function (xhr, status, error) {
          toastr.error("Invalid Item");
        }
      });

    }

  });
});

Solution

  • Thank you very much for your support.

    I finally found that the codings and the reference are correct, but the javascripts are in conflict with other scripts.

    That's why I got this error and then I managed to move some script to the Layout and then this worked.

    Once again thank you for the support