Question

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

谢谢，
格雷格

Answer 1

现在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之间进行详尽的兼容性测试，因此您的里程可能会有所不同。如果您遇到此方法的任何问题，请在此处发表评论。祝你好运。

Answer 2

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

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

Answer 3

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

Answer 4

我做了很多搜索。 jQuery UI自动完成排序适用于修改输入文本框。 jQuery Mobile过滤器搜索框模拟了一个自动比赛，但我真的觉得它不适用于实际的数据收集表格。

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

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

Answer 5

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

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

Answer 6

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

Answer 7

我最近发布了一个零依赖的autoComplete组件。（无jQuery的）

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

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

获得jQueryUi自动完成功能以使用jQueryMobile

7 个答案: