Question

I have a site with a form with autocomplete using jquery. It works fine, however when i add the jQuery UI to my page, it stops working. Does anybody have an idea why or how to fix it, I can’t seem to find why.

the code for the autocomplete is as follows:

head:

<script type="text/javascript" src="js/jquery-1.5.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>

    <script type="text/javascript">
    $().ready(function() {
        $("#food").autocomplete("search.php", {
            width: 260,
            cacheLength: 10,
            matchContains: false,

            //mustMatch: true,
            //minChars: 0,
            //multiple: true,
            //highlight: false,
            //multipleSeparator: ",",
            selectFirst: true

        });
    });
    </script>

body:

<input type="text" name="food" id="food" / >

So when I add the following line to my head in the code it stops working:

<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

Is there overlap in functions between the jqQuery and jQueryUI library that breaks it? Any ideas on how to fix this?

Answer 1

Yes the autocomplete function is overlapping here. http://jqueryui.com/demos/autocomplete/

If you really dont wanna use jQuery UI AutoComplete then call your custom script after jquery ui script.

<script type="text/javascript" src="js/jquery-1.5.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>