jquery - (...).autocomplete is not a function

Question

I'm currently working on a web application. There, I created a Textbox (Works with jquery autocomplete) which shows up when the user clicks on a button. Then I want to load the needed source for autocomplete from my database. But I'm currently testing it with some random values. When I call this:

            $("#docNameTB").autocomplete({
            source: ["Apple", "Banana"]
        });

The console says: "Uncaught TypeError: $(...).autocomplete is not a function"

Here are my script sources:

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Here's my event code:

        function nextClicked() {
          $("#docNameTB").autocomplete({
              source: ["Apple", "Banana"]
          });
        }

And here's my Textbox:

               @Html.TextBox("docNameTB", "", new { @class = "form-control", @placeholder="Enter name here" })

Here's my button Press code:

            <a class="btn btn-default" id="nextButton" onclick="nextClicked()">Next &raquo;</a>

The solution of this question didn't work for me. I only use the google places script source too and this is not a problem (I have tested it already):

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>

Sry for my bad English and my formatting this is my first question. :) I hope somebody can help me! Thanks for your reply!

Make sure you aren't loading jQuery.js again in page which would wipe out all the plugin methods contained in jQuery-UI — charlietfl, Jun 24 '17 at 18:00
Possible duplicate of [.autocomplete is not a function Error](https://stackoverflow.com/questions/19591155/autocomplete-is-not-a-function-error) — mumair, Jun 24 '17 at 18:03

score 1 · Accepted Answer · answered Jun 24 '17 at 19:57

I searched for another 3 hours in the Internet and I read, read and read. And now I created my own solution, that worked for me. The trick was that I had to run autocomplete() on page load AND on button click.

Here's the Page load code:

    var docNameTB = $("#docNameTB");
    docNameTB.autocomplete({
        source: ["Banana", "Apple"]
    });

and here's the button click event code:

        function nextClicked() {
          docNameTB.autocomplete({
              source: ["Peach", "Ananas"]
          });
          // Other Code
        }

Maybe this is gonna help somebody too :)

score 0 · Answer 2 · answered Jun 24 '17 at 18:10

0

Try this HTML Part

<input type="text" class="form-control" onkeydown="nameSearch()" id="searchBox" placeholder="Search">

JS PART

function nameSearch()
{
$("#searchBox").autocomplete({
                source : ["Apple", "Banana"],
            });
}

answered Jun 24 '17 at 18:10

Vinaysingh Khetwal

121
1
7

Thanks for your Reply but I still receive the error: "Uncaught TypeError: $(...).autocomplete is not a function at nameSearch (SearchProfile:76) at HTMLInputElement.onkeydown (SearchProfile:70)" – LRK Jun 24 '17 at 18:22
Use this Sequence – Vinaysingh Khetwal Jun 24 '17 at 18:28

score 0 · Answer 3 · answered Jun 24 '17 at 18:29

0

Use this Sequences

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="yourJSFile"></script>

answered Jun 24 '17 at 18:29

Vinaysingh Khetwal

121
1
7

Thank you for your answer but I still have a question: Can you explain what I have to fill in "yourJSFile"? - My JavaScript code isn't in an external file (Maybe that helps) - I'm new at coding with JavaScript and JQuery – LRK Jun 24 '17 at 18:36
if you have separated js file then link it to here and if not then delete the line – Vinaysingh Khetwal Jun 24 '17 at 18:40
I deleted the line so I have only these sources: but I still receive the same error – LRK Jun 24 '17 at 18:42
– Vinaysingh Khetwal Jun 24 '17 at 18:44
Thank you again for your quick answer. Now I put the line " – LRK Jun 24 '17 at 18:47

score 0 · Answer 4 · answered Sep 08 '20 at 05:18

Use Jquery and Jquery UI CDn or Link at the head section

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

jquery - (...).autocomplete is not a function

4 Answers4