XF 2.2 Error when using JS autocomplete() function

Orit · Mar 15, 2023

Hi
I'm trying to add a JS function to generate an autocomplete input, but keep getting the error:
Uncaught TypeError: jQuery(...).autocomplete is not a function

I've added the scripts:

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

and created a new template to add the stylesheet:

HTML:

<xf:css src="jquery_ui.css" />

Has anyone else got this error? The code works perfectly locally, but not in XENFORO, so I was wondering if there is a conflict somewhere?

Thanks!

Orit · Mar 21, 2023

Please...
My code works locally. Just not on Xenforo...

HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A List of Towns</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"
  integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY="
  crossorigin="anonymous"></script>

</head>
<body>
    <script>
       $(function() {
        var towns = [
            {'name' : 'London'},
            {'name' : 'Leeds'}
        ];
        //console.log(towns);

        function handleAutocomplete(term) {
        // use 'term' for custom filtering etc.
        var options = $.grep(towns, function(e) {
            return e.name.startsWith(term);
        });
        return options;
        }

        $("#cityList").autocomplete({
        minLength: 0,
        source: function(request, response) {
            var name = request.term;
            var data = handleAutocomplete(name); /* get answers from somewhere.. */
            response(data);
        },
        focus: function(event, ui) {
            $("#cityList").val(ui.item.name);
            return false;
        },

        select: function(event, ui) {
            $("#cityList").val(ui.item.name);
            return false;
        }
        }).autocomplete("instance")._renderItem = function(ul, item) {
        return $("<li>")
            .append("<div>" + item.name + "</div>")
            .appendTo(ul);
        };
    });
    </script>


<div>
  <label>Town:</label><input id="cityList" class="city" type="text" placeholder="start typing...">
</div>
 
</body>
</html>

My goal is to eventually add a list of towns dynamically using an api call, but when running on XenForo I get the Uncaught TypeError: jQuery(...).autocomplete is not a function error...

XF 2.2 Error when using JS autocomplete() function

Orit

Active member

Orit

Active member

Similar threads

We value your privacy