javascript - 如何在 onsen-ui 中使用自动完成功能?

标签 javascript jquery jquery-mobile autocomplete onsen-ui

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

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

我知道我可以使用 jQuery 或 jQuery Mobile,但导入所需的文件后我仍然收到错误:“自动完成不是函数”,并且页面不会显示任何 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 或以任何方式创建自动完成功能?

最佳答案

相信我,这并没有那么复杂。

首先,您不需要 jQuery。 jQuery Mobile 甚至无法与 OnsenUI 一起使用。

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

披露这是我的个人博客文章。您将找到一个简单的工作示例,向您展示如何将主从模式与 OnsenUI 结合使用。

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

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

附注

您不能将 jQuery Mobile 与 OnsenUI 一起使用,它们都是移动 UI 框架。切勿将它们混合在一起,没有意义。

虽然 OnsenUI 支持 jQuery,但请尝试最少地使用它。 OnsenUI 是为与 AngularJS 配合使用而构建的,所以这就是您应该学习的内容。

我的建议,请观看:https://www.youtube.com/watch?v=TRrL5j3MIvo 。看完那个视频你就会忘记 jQuery。

关于javascript - 如何在 onsen-ui 中使用自动完成功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31704404/

相关文章:

javascript - 在移动设备上捏合/缩放滚动图像

Android-Jquery Mobile/Phonegap 应用程序底部的空白区域

javascript - SignalR 新手,有没有一种方法可以在用户执行操作时向其他人广播,而不仅仅是在他们开始和结束时?

javascript - 为什么我的航点销毁函数调用会抛出错误?

javascript - EmberJS 如何在单个排序数组内的同一路由上加载多个模型

javascript - 销毁 jQuery 插件实例,以便它可以再次重新实例化,因为插件销毁功能不起作用?

javascript - Ajax 或 Jquery 加载直到页面完成呈现 rails View 页面

javascript - 如何优化此 Javascript 函数?

javascript - 选择发送到 JQuery 函数的项目

java - 将 Primefaces FileUpload 与 jQuery Mobile 结合使用 p :fileupload not rendered?