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

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

【问题讨论】:

  • 我的回答对你有用吗?

标签: angularjs angularjs-directive autocomplete ionic-framework


【解决方案1】:

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

Ionic directive - Autocomplete

Ionic directive - Autocomplete Website

【讨论】:

  • 感谢您使用此指令;)。我希望它符合您的需求,如果您有任何问题或反馈,请在 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

    查看demo here

    【讨论】:

      【解决方案4】:

      你可以试试这个。

      1. 安装凉亭:npm install -g bower
      2. 然后,在项目根目录上运行: bower install ionic-autocomplete

      3. 在视图上添加这个属性

        <input type="text" ng-model="search" ionic-autocomplet="{item:myItems, onSelect: doSomthing}" />

      4. 最后,将它添加到您的控制器中:

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

      参考:Bower library

      Github:Example on Github

      我希望这会有所帮助。

      【讨论】:

        猜你喜欢
        • 2016-02-22
        • 2016-04-24
        • 2015-08-01
        • 1970-01-01
        • 2020-06-03
        • 2019-11-18
        • 1970-01-01
        • 2015-11-21
        相关资源
        最近更新 更多