自动完成不在PHP中给出自动完成未定义的错误

Question

I am trying to add AutoComplete in my html

JQUERY AUTOCOMPLETE FILE LINK Here is how i have added it

<script src="<?php echo $site_root?>js/autocomplete/jquery.ui.autocomplete.autoSelect.js"></script>

Trying to access using

$("#username").autocomplete({
        source: <?php echo $username; ?>,   
        select: function(event, ui) 
        {
            var username = ui.item.label;
            window.location = 'submissionForm.php?username=' + username;
        }
    });

I am getting This error Cannot read property 'autocomplete' of undefined

What is wrong?

Answer 1

If you open the autocomplete file you'll see something like:

define([
    "jquery",
    "./core",
    "./widget",
    "./position",
    "./menu"
], factory );

Those are the files you need additionally, in that order, on the page.

<script src="path-to/jquery.min.js"></script>
<script src="path-to/jquery-ui/ui/core.js"></script>
<script src="path-to/jquery-ui/ui/widget.js"></script>
<script src="path-to/jquery-ui/ui/position.js"></script>
<script src="path-to/jquery-ui/ui/menu.js"></script>
<script src="path-to/jquery-ui/ui/autocomplete.js"></script>

If you don't care for any future additions regarding widgets, go get the complete minified version of jquery UI.

Also CSS is important! To use custom builds, you propably don't want any aditional widget CSS since that will never be used.