Question

I can’t get jQuery-UI Autocomplete to work after loading Zurb Foundation 3.1.

Anyone got them to work together or found another autocomplete plugin that works with Foundation??

Uncaught TypeError: Object [object Object] has no method 'autocomplete'
(anonymous function) order.js:7
l foundation.min.js:18
c.fireWith foundation.min.js:18
v.extend.ready foundation.min.js:18
A foundation.min.js:18

Answer 1

It works great in that page, but if you use other components like Orbit or Reveal, and you have a site built on top of Foundationn then foundation.min.js is necessary.

foundation.min.js includes Modernizr, jQuery library, orbit, reveal, tooltips. So you can use jQuery library included in foundation.min.js (foundation 3.2 includes jQuery 1.8.2). I left those imports at the end of the body and then added what I needed (jQuery ui for the autocomplete and datepicker and then the script), so it ended up like this:

<script src="javascripts/foundation.min.js"></script>
<script src="javascripts/app.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

<script type="text/javascript">
    $(function () {
        var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
        $("#tags").autocomplete({
            source: availableTags
        });
    });
    $(function () {
        $("#datepicker").datepicker();
    });
</script>

The scripts go in the next order

1. foundation.min.js it contains jquery 1.8
2. foundation.min.js it needs jquery library
3. custom script it needs jquery library and jquery ui