jquery mobile autocomplete different behavior at loading page

Question

Currently I\'ve a problem with the autocomplete function in jquery mobile ( http://andymatthews.net/code/autocomplete/ ). So if I run the page directly via url, the page and the

Answer 1

You import the autocomplete script in the head tag. As JQM only loads this once (the first page you open) and then dynamically loads the div from the page you want to go to with data-role="page", the head tag from the first page is always used in the pages you redirect to from that page.

For more information read this page: http://jquerymobile.com/test/docs/pages/page-scripting.html (Scripts & styles in the head)

So you need to add this line:

<script src="jqm.autoComplete-1.4.3-min.js"></script>

to you page div, like this:

<div data-role="page" id="mainPage">
    <script src="jqm.autoComplete-1.4.3-min.js"></script>
    <div data-role="header">
    //rest of the code....
</div>//end of data-role="page"

This way the script will be loaded when JQM pulls in the page using AJAX and it will also be available when you go to the page directly