Gre*_*low 14 jquery-ui-autocomplete jquery-mobile
我正在开发一个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自动完成解决方案.如果有更好的方法,请告诉我.
谢谢,
格雷格
Gre*_*low 18
现在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',
minLength: 3,
select: function (event, ui) { }
});
要做相同的事情,但它连接到特定的页面div看起来像这样:
$('#searchPage').live('pageinit', function (event) {
$('#search').autocomplete({
source: '/Autocomplete/SearchAutoComplete',
minLength: 3,
select: function (event, ui) { }
});
});
到目前为止,这对我来说一直很好.我已经能够删除大部分数据-ajax ="false"属性我作为一种解决方法.反过来,这又带来了更好的应用程序性能.我绝不会在jQuery UI和jQuery Mobile之间进行详尽的兼容性测试,因此您的里程可能会有所不同.如果您遇到此方法的任何问题,请在此处发表评论.祝好运.
com*_*ted 13
为了将来的参考,我最近发布了一个专门为jQuery Mobile编写的autoComplete插件:
http://www.andymatthews.net/code/autocomplete/
| 归档时间： |
|
| 查看次数： |
32304 次 |
| 最近记录： |