离子自动完成答案

【问题标题】：Autocomplete in Ionic离子自动完成
【发布时间】：2019-09-07 02:40:42
【问题描述】：

我是ionic 的新手，我已经开始在上面创建应用程序。最近几天，我一直在 ionic 中搜索 autocomplete。我找到了一个codepan，但并不是那么简单。我需要像JqueryUI 提供的自动完成功能。

【问题讨论】：

【解决方案1】：

有一个很酷的directive，直到现在它是 github repo 上 155 *s 的可接受解决方案，试试吧：

【讨论】：

感谢您使用此指令；）。我希望它符合您的需求，如果您有任何问题或反馈，请在 github 存储库中创建一个问题。
我尝试使用它，但它在键入时在搜索选项中返回对象而不是名称。我在回调函数返回中使用了 http.get(url)。
@AkashSaxena 看起来解决方案正在运行，您需要再次阅读文档以在显示屏上显示正确的值 item-view-value-key="child.name" 请参阅此链接 github.com/guylabs/…
@ZeeshanHassanMemon，谢谢。我试过，但这仅显示项目列表，不显示过滤数据。我需要以这种输入类型从控制器传递数组变量吗？
@ZeeshanHassanMemon 我的回调函数是这样的： $scope.autoCompleteMethod = function (query, isInitializing) { if(query){ return $http.get(baseurl+'corportaions'); }else{ 返回 [查询]; } }

【解决方案2】：

如果你想要一个像 bootstrap typehead 这样的自动完成功能，而不是 Guylabs 的模态自动完成功能，你有 allmighty-autocomplete。它适用于 Angular，但我将其分叉并进行了一些更改以适应 Ionic。

工作正常，但是如果您在表单中的文本输入之前放置一个问题。你可以在这里看到这个问题：Clicks on div over an input in Ionic

【讨论】：

【解决方案3】：

如果您使用的是 Ionic 2+ 和 Angular 2+，那么我推荐 ionic4-auto-complete。

【讨论】：

【解决方案4】：

你可以试试这个。

安装凉亭：npm install -g bower
然后，在项目根目录上运行： bower install ionic-autocomplete
在视图上添加这个属性

<input type="text" ng-model="search" ionic-autocomplet="{item:myItems, onSelect: doSomthing}" />
最后，将它添加到您的控制器中：

.controller('MyCtrl', function($scope){ $scope.doSomthing = function(item) { console.log('The selected item is: '+item); } });

参考：Bower library

Github：Example on Github

我希望这会有所帮助。

【讨论】：