让 jQueryUi 自动完成与 jQueryMobile 一起使用

发布于 2024-11-07 06:19:52 字数 592 浏览 1 评论 0原文

我正在开发一个 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 自动完成解决方案的束缚。如果有更好的方法来做到这一点，请告诉我。

谢谢，
格雷格

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

心安伴我暖 2024-11-14 06:19:52

现在 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) { }
    });
});

到目前为止，这对我来说效果很好。作为解决方法，我已经能够删除大部分 data-ajax="false" 属性。这反过来又带来了更好的应用程序性能。我从未在 jQuery UI 和 jQuery Mobile 之间进行详尽的兼容性测试，因此您的体验可能会有所不同。如果您在使用此方法时遇到任何问题，请在此发表评论。祝你好运。

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.

回复收藏 0 原文

梦中的蝴蝶 2024-11-14 06:19:52

为了将来参考，我最近发布了一个专门为 jQuery Mobile 使用而编写的 autoComplete 插件：

http://www.andymatthews .net/code/autocomplete/

回复收藏 0 原文

时间你老了 2024-11-14 06:19:52

$('div').live('pagebeforecreate',function(event,ui){
    // do something in jquery
});

$('div').live('pagebeforecreate',function(event,ui){
    // do something in jquery
});

回复收藏 0 原文

深府石板幽径 2024-11-14 06:19:52

我已经做了很多搜索。 jQuery UI 自动完成功能可以用来修改输入文本框。 jQuery Mobile 过滤器搜索框模拟自动竞争，但我确实没有发现它对于实际数据收集表单非常有用。

这篇文章让我开始使用 jQuery UI 自动完成功能，但我一直遇到格式问题。我最终只编写了自己的 ajax（目前）自动完成功能，并认为我会分享它。源代码可供您根据需要进行调整。也许有人可以接受并改进它，或者直接使用它。

http://schworak.com/blog/e75/jquery-移动---自动完成文本输入/

回复收藏 0 原文

╭⌒浅淡时光〆 2024-11-14 06:19:52

我不确定它是否适用于您的情况，但解决方法是添加 data-ajax="false" 属性以防止 ajax 加载页面。

http://jquerymobile.com/demos/1.0a4。 1/#docs/pages/link-formats.html

回复收藏 0 原文

烟凡古楼 2024-11-14 06:19:52

jQuery Mobile 现在具有自动完成功能，结果将填充在列表视图中。他们的演示页面有关于如何实现它的很好的例子，对于本地和远程数据。

回复收藏 0 原文

ぶ宁プ宁ぶ 2024-11-14 06:19:52

我最近发布了一个零依赖的自动完成组件。（无 jQuery）

这完全支持大多数移动浏览器，如 Android、iOS。

https://github.com/skplanet/sweetsearch/

回复收藏 0 原文

~没有更多了~

关于作者

埖埖迣鎅

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

让 jQueryUi 自动完成与 jQueryMobile 一起使用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

让 jQueryUi 自动完成与 jQueryMobile 一起使用

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（7）

关于作者

相关话题

热门标签

推荐作者

linfzu01

§对你不离不弃

可遇━不可求

枕梦

qq_3LFa8Q

JP

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。