让 jQueryUi 自动完成与 jQueryMobile 一起使用 [英] Getting jQueryUi Autocomplete to work with jQueryMobile
问题描述
我正在开发一个 jQueryMobile 应用程序，其中包含一些需要自动完成功能的表单字段.我正在使用 jQueryUi 自动完成插件，但无法正常工作.如果我的表单是浏览器中加载的初始页面，则它工作正常，但如果稍后通过 jQueryMobile ajax 加载机制加载该表单，则它不起作用.
我正在使用的版本是:
jQueryMobile:1.0a4.1
jQueryUi:1.8.9
jQuery:1.4.4
我的自动完成功能如下所示:
$(function () {$('#search').自动完成({来源:'/Autocomplete/SearchAutoComplete',最小长度:3，选择:功能(事件，用户界面){}});});我的想法是这需要连接到当前的活动页面，但我不知道如何做到这一点.有人可以让我知道如何做到这一点吗?
此外，我不依赖于 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，然后是您的自定义脚本文件.我的页面标题看起来像这样:
<meta charset="utf-8"/><meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/><title>我的 jQM 应用</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 src="/Scripts/script.js" type="text/javascript"></script><link rel="stylesheet" href="/Content/style.css"/>所有自动完成代码都应该在一个单独的 .js 文件中，并且应该是链接到的最后一个文件.在这个示例中，我的是 script.js.
接下来，确保所有页面 div(data-role='page')也设置了 id.例如，在我的搜索页面上，我有
既然所有页面 div 都有 id，您可以绑定到该 div 的 jQuery Mobile pagecreate 事件.在标准的 jQuery 页面中，您将拥有这样的自动完成功能:
$('#search').autocomplete({来源:'/Autocomplete/SearchAutoComplete',最小长度:3，选择:功能(事件，用户界面){}});
要执行等效操作，但将其连接到特定页面 div 如下所示:
$('#searchPage').live('pageinit', function (event) {$('#search').自动完成({来源:'/Autocomplete/SearchAutoComplete',最小长度:3，选择:功能(事件，用户界面){}});});
到目前为止，这对我来说效果很好.作为一种变通方法，我已经能够去除大部分 data-ajax="false" 属性.这反过来又导致了更好的应用程序性能.我从来没有在 jQuery UI 和 jQuery Mobile 之间做过详尽的兼容性测试，所以你的里程可能会有所不同.如果您在使用此方法时遇到任何问题，请在此处发表评论.祝你好运.
I'm working on a jQueryMobile application with some form fields that need auto complete functionality. I'm working with jQueryUi Autocomplete plugin but can't get it to work properly. It works fine if my form is the initial page loaded in the browser but doesn't work if the form is loaded later via the jQueryMobile ajax loading mechanism.
The versions I'm working with are:
jQueryMobile: 1.0a4.1
jQueryUi: 1.8.9
jQuery: 1.4.4
My auto complete function looks like this:
$(function () {
$('#search').autocomplete({
source: '/Autocomplete/SearchAutoComplete',
minLength: 3,
select: function (event, ui) { }
});
});
My thinking is that this needs to be wired up to the current active page but I'm not sure how to do this. Can someone let me know how to accomplish this?
Also, I'm not tied to the jQueryUi autocomplete solution. If there is a better way to do this, please let me know.
Thanks,
Greg
解决方案 Now that JQuery Mobile has matured quite a bit and is getting close to it's 1.0 release, I decided to take another stab at getting this to work properly. I've had good success so I'd like to share the solution here.
Here are the versions I am now currently working with (as of 01-Feb-2012):
jQuery Mobile 1.0.1
jQuery 1.6.4
jQuery UI 1.8.12
The order in which the scripts are referenced is critical. It needs to be jQuery, jQuery UI, jQuery Mobile, then your custom script file last. My page head looks like this:
<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>
All of the autocomplete code should be in a separate .js file and should be the last file linked to. In this sample, mine is script.js.
Next, make sure that all of your page div's (data-role='page') also have an id set. For example, on my search page I have
<div data-role="page" id="searchPage">
Now that all the page div have id's you can bind to the jQuery Mobile pagecreate event for that div. In a standard jQuery page you would have something like this for the autocomplete:
$('#search').autocomplete({
source: '/Autocomplete/SearchAutoComplete',
minLength: 3,
select: function (event, ui) { }
});
To do the equivalent but have it hooked up to the specific page div looks like this:
$('#searchPage').live('pageinit', function (event) {
$('#search').autocomplete({
source: '/Autocomplete/SearchAutoComplete',
minLength: 3,
select: function (event, ui) { }
});
});
This has been working well for me so far. I've been able to strip out most of data-ajax="false" attributes I had in place as a workaround. This, in turn, has resulted in better application performance. I have by no means done an exhaustive compatibility test between jQuery UI and jQuery Mobile so your mileage may vary. Please leave a comment here if you run into any problems with this method. Good luck.
这篇关于让 jQueryUi 自动完成与 jQueryMobile 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
