如何在 onsen-ui 中使用自动完成功能？答案

【问题标题】：How to use autocomplete with onsen-ui?如何在 onsen-ui 中使用自动完成功能？
【发布时间】：2015-07-30 00:27:08
【问题描述】：

我正在使用 Onsen-ui 构建一个移动应用程序，它是基于我不熟悉的 AngularJS 构建的。我想在搜索栏上使用远程自动完成功能并使用结果填充 ons-list。

我浏览了文档，但找不到与自动完成相关的任何内容，只有 ons-lazy-repeat 这很好，但无法使用搜索输入过滤结果。

我知道我可以使用 jQuery 或 jQuery Mobile，但是导入了所需的文件后，我仍然收到错误：'autocomplete is not a function'，并且页面不会显示任何 jQuery Mobile元素。

这些是我的进口：

<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">  

<script src="components/monaca-onsenui/js/onsenui_all.min.js"></script>
<link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components.css">

<script src="components/monaca-jquery/jquery.js"></script>
<script src="components/monaca-jquery-mobile/jquery.mobile.js"></script>
<link rel="stylesheet" href="components/monaca-jquery-mobile/css/jquery.mobile.structure.css">

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script src="js/app.js"></script>

有什么方法可以让 jQuery UI 或 jQuery Mobile 与 Onsen-ui 一起工作，或者使用 AngularJS 或以任何方式创建自动完成功能？

【问题讨论】：

标签： javascript jquery jquery-mobile autocomplete onsen-ui

【解决方案1】：

相信我没那么复杂。

首先，您不需要 jQuery。 jQuery Mobile 甚至无法使用 OnsenUI。

看看这个链接：http://www.gajotres.net/ionic-framework-tutorial-5-master-detail-pattern/

披露这是我的个人博客文章。您将找到一个简单的工作示例，向您展示如何在 OnsenUI 中使用 Master-Detail 模式。

您应该对该文章的第一部分感兴趣。

在其中，我使用远程 API 来收集远程数据并将它们显示在列表组件中。从根本上说，您在搜索框中输入的任何内容都将作为过滤后的结果集返回。

附言

您不能将 jQuery Mobile 与 OnsenUI 一起使用，它们都是移动 UI 框架。永远不要把它们混在一起，没有意义。

虽然 OnsenUI 支持 jQuery，但请尽量少用它。 OnsenUI 是为与 AngularJS 一起工作而构建的，所以这就是你应该学习的内容。

我的建议，看这个：https://www.youtube.com/watch?v=TRrL5j3MIvo。看完那个视频，你会忘记 jQuery 的一切。

【讨论】：