使jQueryUi自动完成功能可与jQueryMobile一起使用 [英] Getting jQueryUi Autocomplete to work with jQueryMobile
问题描述
我正在使用带有一些需要自动完成功能的表单字段的jQueryMobile应用程序.我正在使用jQueryUi自动完成插件，但无法使其正常工作.如果我的表单是在浏览器中加载的初始页面，则可以正常工作，但是如果稍后通过jQueryMobile ajax加载机制加载了表单，则无法正常工作.
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.
我正在使用的版本是:
jQueryMobile:1.0a4.1
jQueryUi:1.8.9
的jQuery的:1.4.4
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?
此外，我不受jQueryUi自动完成解决方案的束缚.如果有更好的方法，请告诉我.
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
推荐答案
现在，jQuery Mobile已经相当成熟，并且已经接近1.0版本了，我决定再次尝试使其正常工作.我已经取得了不错的成绩，所以我想在这里分享解决方案.
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.
以下是我目前正在使用的版本(截至2012年2月1日):
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
jQuery Mobile 1.0.1
jQuery 1.6.4
jQuery UI 1.8.12
引用脚本的顺序至关重要.它必须是jQuery，jQuery UI，jQuery Mobile，然后是您的自定义脚本文件.我的页面头看起来像这样:
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>
所有自动完成代码应位于单独的.js文件中，并且应是链接到的最后一个文件.在此示例中，我的是script.js.
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.
接下来，确保所有页面div的(data-role ='page')也都设置了ID.例如，在我的搜索页面上，我有
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">
现在所有页面div都有ID，您可以绑定到该div的jQuery Mobile pagecreate事件.在标准的jQuery页面中，您将具有类似以下内容的自动填充功能:
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) { }
});
要进行等效操作，但将其连接到特定的页面div上，则看起来像这样:
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) { }
});
});
到目前为止，这对我来说一直很好.我已经能够剔除我作为解决方法而拥有的大多数data-ajax ="false"属性.反过来，这又导致了更好的应用程序性能.我绝没有在jQuery UI和jQuery Mobile之间进行详尽的兼容性测试，因此您的工作量可能会有所不同.如果您在使用此方法时遇到任何问题，请在此处发表评论.祝你好运.
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屋！
