Question 186147 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – $(…).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");
        }
      });

    }

  });
});
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    Since autocomplete is not a built-in function, you have to include the desired plugins in your project. Since the code you provided does not show the scripts tag you have included I will provide you with the necessary things needed:

    1. Make sure that you have included the jQuery and jQuery UI scripts in your project and that they are loaded before the code that uses the autocomplete function.

    2. Place your autocomplete code inside document.ready to ensure that the code is executed after the document has finished loading.

        
    $(document).ready(function() {
      $("#itemSerachBox").autocomplete({
         // your code
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search