获取jQueryUi自动完成与jQueryMobile一起工作

我正在使用一些需要自动完成功能的表单域来处理jQueryMobile应用程序。我正在使用jQueryUi自动完成插件，但无法使其正常工作。它工作正常，如果我的表单是在浏览器中加载的初始页面，但如果表单稍后通过jQueryMobile ajax加载机制加载，则不起作用。获取jQueryUi自动完成与jQueryMobile一起工作

我正在使用的版本是：
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自动完成解决方案。如果有更好的方法来做到这一点，请让我知道。

谢谢
格雷格

来源

2011-05-13 Greg Enslow

现在，jQuery Mobile的已经成熟了不少，并且正在接近它的1.0版本，我决定采取另一种刺在得到这个正常工作。我取得了很好的成绩，所以我想在此分享解决方案。

这里是我现在正与（如01 - 2月 - 2012年）工作的版本：

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文件，应该链接到最后一个文件。在这个示例中，mine是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之间进行彻底的兼容性测试，因此您的里程可能会有所不同。如果遇到此方法的任何问题，请在此留言。祝你好运。

来源

2011-10-29 00:52:49

我只是试图复制这个例子，我总是有相同的问题。提交表单后，用户重定向回到同一页面;但是，自动填充字段不再起作用。这是否仍然按预期工作？是否需要修改？ – 2012-02-16 05:31:53

脚本的重新排序为我做了。移动前必须包含jQuery-UI。 – 2013-06-28 09:27:17

'.live'已被删除。现在应该使用'.on'。也许编辑你的文章，这反映了这一点？ – DJTripleThreat 2013-10-17 06:49:28

我不知道它是否适合你的情况，但一个解决方法是添加数据阿贾克斯=“假”属性，以防止页面被加载由阿贾克斯。

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

来源

2011-05-16 12:30:15 Ingo

是的，我已经使用，作为一个临时的解决办法，但它不是一个很好的长期解决方案。我正在寻找一个可以正确使用框架的解决方案。谢谢。 – 2011-05-16 16:25:50

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

来源

2011-06-09 15:21:41

以供将来参考我最近发布了一个自动完成插件专为使用写有jQuery Mobile的：

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

来源

2012-04-02 01:22:41 commadelimited

jQuery Mobile的现在有自动完成，其中结果被填充在ListView。他们的demo page有很多关于如何实现本地和远程数据的例子。

来源

2013-04-22 18:28:51 MForMarlon

我已经做了一堆搜索。 jQuery UI自动完成类型的工作来修改键入文本框。 jQuery Mobile过滤器搜索框模拟一个自动运行，但我真的没有发现它与实际的数据收集表单一起使用非常有用。

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

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

来源

2013-11-09 08:50:44

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

这完全支持大多数手机浏览器，如Android，iOS。

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

来源

2016-03-28 14:22:35 superui

获取jQueryUi自动完成与jQueryMobile一起工作

回答

相关问题