Problem with iscroll + jquery-ui autocomplete (unable to select suggested options)

[Gaurav]

Hello,

I am using iscroll (for fixed header/footer in ipad).

I have placed a jquery autocomplete box on a page with following code:

<div class="searchbox-form">
    <input type="text" name="auto-q" id="auto-q" onkeyup="inputKeyUp(event);">
</div>
<div id="auto-complete-container"></div>

<script>

    jQuery(document).ready(function() {

        jQuery('#auto-q').autocomplete({
                    appendTo: "#auto-complete-container",
                    minLength: 3,
                    source: "${autoCompleteUrl}"
                });
    });
</script>

And initiating iscroll as:

<script>

var isIPad = (navigator.platform == "iPad" || navigator.platform == "iPhone");

var myScroll;

function loaded() {

myScroll = new iScroll('iscroll-wrapper', {

useTransform: false,

onBeforeScrollStart: function (e) {

var target = e.target;

while (target.nodeType != 1) target = target.parentNode;

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')

e.preventDefault();

}

});

}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', loaded, false);

</script> 

But in ipad, when I type something and get auto-suggest options and try to select some by tipping, I get some jquery-ui js error.

And when I does not use append-to in auto-complete, then it works fine for selection of options, but a new error occurs, options gets listed in auto-suggestion, i can scroll the page but this auto-suggestion area does not gets scrolled (since this elements gets attached out of the iscroll-wrapper.)

Please sugggest how to fix it.