logo标签列表

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

jquery-mobilejquery-ui-autocomplete
15
我正在开发一个带有一些表单字段的jQueryMobile应用程序，需要自动完成功能。我正在使用jQueryUi Autocomplete插件，但无法正确使用它。如果我的表单是浏览器中加载的初始页面，则它可以正常工作，但如果表单是通过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自动完成解决方案上。如果有更好的方法，请让我知道。

谢谢，
Greg

7个回答
19

现在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，您可以绑定到jQuery Mobile页面创建事件以针对该div执行操作。在标准的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之间进行详尽的兼容性测试，所以你的结果可能会有所不同。如果您使用此方法遇到任何问题，请在此处留下评论。祝好运。

我刚刚尝试复制这个示例，然而和以往一样遇到了相同的问题。提交表单后，用户被重定向回同一页；但自动完成字段不再起作用。这仍然符合预期吗？是否需要进行任何修改？ - Jacob Hulse
重新排列脚本对我很有帮助。jQuery-UI必须在移动端之前被包含。 - T. Junghans
2
.live已被移除，现在应该使用.on。也许您应该编辑您的帖子以反映这一点？ - aarona
14
2

我进行了许多搜索。jQuery UI自动完成可以在修改输入文本框方面有所作为。jQuery移动过滤器搜索框模拟了自动完成，但我真的没有发现它在实际数据收集表单中非常有用。

这篇文章让我开始使用jQuery UI自动完成，但我遇到了格式问题。最终，我编写了自己的仅具有ajax（目前）自动完成，并想分享一下。源代码可供您根据需要进行调整。也许有人可以将其拿出来改进，或者只是按原样使用它。

http://schworak.com/blog/e75/jquery-mobile---autocomplete-text-input/

2
$('div').live('pagebeforecreate',function(event,ui){
    // do something in jquery
});
0
是的，我已经将其用作临时解决方法，但这不是一个好的长期解决方案。我正在寻找与框架正确配合的解决方案。谢谢。 - Greg Enslow
0
jQuery Mobile现在具有自动完成功能，结果会在列表视图中显示。他们的演示页面上有很好的示例，介绍了如何实现本地和远程数据的自动完成功能。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接