我正在使用一些需要自动完成功能的表单字段的jQueryMobile应用程序.我正在使用jQueryUi自动完成插件,但无法使其正常工作.如果我的表单是在浏览器中加载的初始页面,但是如果以后通过jQueryMobile ajax加载机制加载表单,则不起作用.
我正在使用的版本是：
jQueryMobile：1.0a4.1
jQueryUi：1.8.9
jQuery：1.4.4
$(function () {
$('#search').autocomplete({
source: '/Autocomplete/SearchAutoComplete',minLength: 3,select: function (event,ui) { }
});
});
我的想法是,这需要连接到当前的活动页面,但我不知道如何做到这一点.有人可以让我知道如何做到这一点吗？
另外,我没有绑定到jQueryUi自动完成解决方案.如果有更好的方法,请让我知道.
谢谢,
格雷格
解决方法
现在JQuery Mobile已经成熟了,并且越来越接近1.0版本,我决定采取另一个刺激,使其正常工作.我取得了很好的成功,所以我想在这里分享解决方案.
以下是我现在正在使用的版本(截至2012年2月1日)：
jQuery Mobile 1.0.1
jQuery 1.6.4
jQuery UI 1.8.12
引用脚本的顺序至关重要.它需要是jQuery,jQuery UI,jQuery Mobile,那么你的自定义脚本文件最后.我的页面头像是这样的：
<head> <Meta charset="utf-8" /> <Meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1" /> <title>My jQM App</title> <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js" type="text/javascript"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script> <script src="/Scripts/script.js" type="text/javascript"></script> <link rel="stylesheet" href="/Content/style.css" /> </head>
所有的自动完成代码都应该在一个单独的.js文件中,并且应该是链接到的最后一个文件.在这个示例中,我的是script.js.
接下来,确保您的所有页面div(data-role =’page’)也设置了一个id.例如,在我的搜索页面上
<div data-role="page" id="searchPage">
现在所有的页面div都有id可以绑定到该div的jQuery Mobile pagecreate事件.在一个标准的jQuery页面中,您将有一个这样的自动填充：
$('#search').autocomplete({
source: '/Autocomplete/SearchAutoComplete',ui) { }
});
要做等效的,但它挂钩到特定的页面div看起来像这样：
$('#searchPage').live('pageinit',function (event) {
$('#search').autocomplete({
source: '/Autocomplete/SearchAutoComplete',ui) { }
});
});
到目前为止,这对我来说很好.我已经能够删除大部分data-ajax =“false”属性作为解决方法.这反过来又导致了更好的应用程序性能.我绝对不会在jQuery UI和jQuery Mobile之间进行详尽的兼容性测试,所以你的里程可能会有所不同.如果遇到这种方法的任何问题,请在这里留下评论.祝你好运.
