如何在 Ionic 4 上的搜索栏上使用自动完成功能?

2024-05-21

我正在寻找一些例子,但看不到有人用谷歌搜索它,我想要的是硬编码 2 或 3 个单词,非常感谢。我必须在 ionic 3 上寻找吗?还是用 Angular2 更好?


在你的 html 文件中:

     <ion-searchbar type="text" debounce="500" (ionChange)="getItems($event)"></ion-searchbar>
     <ion-list *ngIf="isItemAvailable">
         <ion-item *ngFor="let item of items">{{ item }}</ion-item>
     </ion-list>

在你的 ts 文件中:

     // Declare the variable (in this case and initialize it with false)
     isItemAvailable = false;
     items = [];

     initializeItems(){
         this.items = ["Ram","gopi", "dravid"];
     }

     getItems(ev: any) {
         // Reset items back to all of the items
         this.initializeItems();

         // set val to the value of the searchbar
         const val = ev.target.value;

         // if the value is an empty string don't filter the items
         if (val && val.trim() !== '') {
             this.isItemAvailable = true;
             this.items = this.items.filter((item) => {
                 return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
             })
         } else {
             this.isItemAvailable = false;
         }
     }

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Ionic 4 上的搜索栏上使用自动完成功能? 的相关文章

  • 如何为用户提供给定 boost::spirit 语法的自动完成建议?

    我正在使用 Boost Spirit 在我的 C GUI 应用程序中为非技术用户构建简单的 数据过滤器 语言 语言与纯英语非常相似 并且可以解析为 AST 我被要求使该过程尽可能对用户友好 因此我希望提供类似 CLang 的错误消息 无法识
  • 谷歌浏览器自动填充所有密码输入

    我的问题 我必须打开谷歌来自动填充我网站上的登录信息 但是现在每当我想编辑我的帐户信息或编辑其他用户帐户信息 作为管理员 时 它都会尝试自动填充该登录数据 它在奇怪的地方填充了我的数据 问题似乎是 Chrome 会自动用某种密码填充任何输入
  • Atom“自动完成”不起作用

    因此 当您安装 Atom 时 autocomplete 会随其一起提供 并且默认情况下处于启用状态 当我编写代码时 什么也没有显示 为什么 是否需要配置任何文件才能正常工作 In autocomplete plus settings pag
  • Ionic 应用程序中未显示图标

    我遇到了 Ionic 图标的问题 我正在使用 Ionic 4 和 Angular 8 尝试添加二维码图标 但没有成功 我正在使用离子文档 https ionicons com https ionicons com
  • jQuery自动完成插件-自定义突出显示功能

    我的每个项目的自动完成结果如下所示 h3 Celebrity Sweepstakes h3 p 0 episodes p 但我只想突出显示 H3 内的标题 请参阅下面的 突出显示 功能 我不知道如何更改原始正则表达式以仅替换标题内的内容 s
  • 我需要一个 jQuery Autocomplete 使用 ajax 返回 id 和 name 的示例

    我需要一个示例 说明如何编写 jQuery 自动完成代码来填充product id 同时显示调用ajax 页面 remote php 的product name
  • 如何将 Google Now 搜索栏添加到我的应用程序中?

    谷歌刚刚将其搜索栏从 Google Now 引入到了 Play 商店应用程序中 如下面的 gif 所示 如何将这个操作栏搜索栏实现到我自己的应用程序中 我想要 style 汉堡动画 从工具栏按钮访问 麦克风按钮 对棒棒糖设备的连锁反应 我已
  • 动态参数值取决于另一个动态参数值

    启动前提 非常严格的环境 Windows 7 SP1 Powershell 3 0 使用外部库的可能性有限或不可能 我正在尝试重写之前创建的 bash 工具 这次使用 PowerShell 在 bash 中 我实现了自动完成功能 以使该工具
  • Google 将自动完成功能放置在 React 组件中

    我正在尝试构建一个谷歌地图组件 谷歌地图 API v3 一切正常 但自动完成功能不行 这是我正在使用的代码 Google 地图组件 import React Component from react import ReactDOM from
  • Eclipse 中的“自动插入通用前缀”有什么作用?

    我一直在寻找一种改进 Eclipse 中自动完成功能的方法 并且在首选项窗口的 Java gt 编辑器 gt 内容辅助部分中发现了此首选项设置 自动插入公共前缀 我想知道它有什么作用 因为我没有感觉到任何区别 帮助说 如果启用 代码辅助将自
  • 将SQL数据引入jquery availabletag

    我正在尝试制作自动完成文本框 但如何将 SQL 数据包含到 jquery 可用标记并循环它 我无法根据以下代码执行该功能 任何帮助 将不胜感激 谢谢 这是我的预期输出 预期结果演示 http jsfiddle net VvETA 71 jq
  • Emacs 是否具有单词和行补全功能(如 Vim 的插入模式补全功能)?

    Vim 完成单词和行CTRL X P and CTRL L 有一个名为 Company mode 的 Emacs 插件 但该插件会干扰 Emacs 中的许多内容并导致冲突 与全局 linum 和 yasnippets 我知道我可以在 Ema
  • jQueryUI autoComplete 返回空列表

    在我的 asp net mvc3 应用程序中 我为搜索框添加了自动完成功能 当我测试它时 该操作返回了 3 个结果 您可以看到显示了一个列表 但是 这是一个空列表 您只看到 3 个 并且 li 标记之间没有任何内容 我很确定 操作没问题 因
  • jQuery 自动完成显示值而不是标签

    我在用jQuery ui 自动完成 http api jqueryui com autocomplete 这是我的使用方法
  • 是否可以自定义 drupal 节点引用并传递您的搜索和来自另一个字段的参数

    我正在尝试在 drupal 中创建一个带有节点引用字段的定制表单 我想为节点引用自动完成添加一些额外的功能 我创建了一个视图 其中包含一个参数 我希望能够将下拉列表中的参数以及键入的文本传递到自动完成脚本中 有谁知道我该如何开始 FIELD
  • Rails3-jquery-autocomplete 如果没有可用数据则清除字段

    我正在使用rails3 jquery autocomplete 如果自动完成没有返回结果 是否可以清除自动完成字段的值 我试图阻止用户提交数据库中没有的值 我使用的是旧版本 但我实现了change处理程序autocomplete call
  • 如何在 VB6 中创建自动完成组合框?

    是否可以使用VB6下默认的ComboBox控件使其成为智能ComboBox 我们假设这些值已填充到组合框中 例如 New Delhi New World New York 我们需要 ComboBox 响应一个默认事件 因此当用户写入 N 时
  • jquery ui autocomplete:如何在文本输入失去焦点后取消缓慢的ajax请求

    我正在使用 JQuery UI 自动完成字段 该字段与 ajax 查找相关 有时可能会相当慢 有时 用户会按 Tab 键离开文本输入字段afterajax 查询启动但是beforeajax 调用返回 发生这种情况时 即使文本输入不再具有焦点
  • Django Autocomplete Light - “无法加载结果”

    我在一个小型应用程序上使用 Django autocomplete light 用户界面似乎可以正常工作 我可以从一些可见的值中进行选择 当我在框中输入一个或多个字母时 问题就出现了 通常它应该过滤 选择结果 相反 我收到错误 无法加载结果
  • Chrome 如何更新网址栏补全?

    我真的很喜欢使用 Chrome 的地址栏 因为它会记住经常访问的网站 并且经常根据我之前输入和 或访问过的内容提出良好的补全建议 例如 我可以输入t在地址栏中 Chrome 会自动将其填充为twitter com 或者我可以输入mapsCh

随机推荐

  • C++ 到 C# 事件处理

    所以我有我的C WinForm 应用程序 我从中调用我的C CLI MFC dll图书馆 但也有一些events在我的 C 库上 甚至此事件也发生在该库的本机 非 CLI 部分 我需要从我的 C 应用程序调用一些代码 并获取一些有关此事件的
  • 返回表示每组内最大值的索引的一系列数字位置

    考虑一下这个系列 np random seed 3 1415 s pd Series np random rand 100 pd MultiIndex from product list ABDCE list abcde One Two T
  • 快速像素绘图库

    我的应用程序以每像素的方式生成 动画 因此我需要有效地绘制它们 我尝试过不同的策略 库 但结果并不令人满意 尤其是在更高分辨率的情况下 这是我尝试过的 SDL 好的 但是慢 OpenGL 像素操作效率低下 xlib 更好 但仍然太慢 svg
  • 函数速度测试的奇怪结果

    我编写了一个使用递归来查找最大公因数 分母 的函数 gt gcd function a b if length a length b gt 1 warning Only scalars allowed using first element
  • Android复杂布局线性和相对

    I have to implement a layout like shown in the diagram and I do not know the best combination to achieve the required de
  • 如何使用 pycuda 将二维数组输入内核?

    我创建了一个形状为 float32 的 numpy 数组 64 128 我想将其发送到 GPU 我怎么做 我的内核函数应该接受哪些参数 float myArray 我尝试直接将数组发送到 GPU 但 pycuda 抱怨对象正在被访问 默认情
  • Laravel/Homestead - OSX - Vagrant 连接超时

    Problem 我正在尝试让 Laravel Homestead 在我的 Mac Book Air 上运行 我已按照以下指示进行操作http laravel com docs 4 2 homestead http laravel com d
  • Dropbox API - 使用 Dropbox 作为服务器

    我想使用文件共享服务器来使某些文件在多台计算机上的应用程序的多个实例中保持最新和恒定 例如 例如 编写多人游戏 它将所有玩家的位置存储在文本文件中 并使用 Dropbox 之类的工具在所有应用程序中保持文本文件不变 每个应用程序实例都可以根
  • 如何使用 CSI.exe 脚本参数

    当你运行csi exe 安装了 Visual Studio 2015 update 2 您将得到以下语法 Microsoft R Visual C Interactive Compiler version 1 2 0 51106 Copyr
  • MVC 6 Web Api:解析 201 上的位置标头(已创建)

    在 Web Api 2 2 中 我们可以通过从控制器返回来返回位置标头 URL 如下所示 return Created new Uri Url Link GetClient new id clientId clientReponseMode
  • jquery:当我在文档上附加一层时,如何重置文档滚动条?

    当我在文档上附加图层时 如何重置文档滚动条 例如 它就像 Facebook 页面 当您有一个很长的文档时 您需要向下滚动才能查看较旧的图像 帖子 当你点击照片时 滚动条发生了变化 从顶部开始 但文档页面根本不跳转 当关闭照片查看器图层时 滚
  • 使用多线程进行矩阵乘法?

    我应该使用线程将两个矩阵相乘 有两件事 当我运行程序时 我不断得到 0 我还收到消息错误 对于每个错误 它在粗体行上显示 警告 从不兼容的指针类型传递 printMatrix 的参数1 我尝试打印输出 还要注意 第一个粗体块 这是我解决问题
  • Node.js 可读流_read用法

    我了解如何在 Node 的 new 中使用可写流Streams2库 但我不明白如何使用可读流 举个例子 一个流包装器围绕dgram module var dgram require dgram var thumbs twiddle func
  • 更改离子搜索栏的占位符和清晰图标颜色不是全局的吗?

    我有两个离子搜索栏 我只需要更改其中之一的占位符和清除图标颜色
  • 通过复选框选择多行时出错错误未定义索引:复选框

    我想从中选择多行checkbox并想通过单击按钮立即更新它们 我尝试了多种方法 但不起作用 你能帮忙吗 它显示错误为Undefined index checkbox td td
  • 如何通过 AppCompatActivity 使用 YouTube Android 播放器 API

    为了在我的应用程序中播放视频 我决定扩展 YouTube Android Player API 但问题是我的菜单消失了 因为我没有从 AppCompatActivity 扩展 问题是 如何使用 YouTube Android Player
  • SBT Scaladoc 配置

    我正在尝试在 SBT 中配置 Scaladoc 特别是标题 输出目录和类路径 我通过将以下内容添加到 build sbt 来定义标题 scalacOptions in Compile doc Opts doc title Scala Too
  • doxygen c++:记录由“using”声明公开的私有继承成员

    作为一个例子 我有以下课程 class A public void methodOne class B private A public Brief description using A methodOne 我还没有找到强制 doxyge
  • 应用程序被终止时是否会收到 iOS 静默通知

    当发送后台推送时 content available 1 对于被用户杀死的应用程序 该应用程序不会启动到后台模式 并且application didReceiveRemoteNotification fetchCompletionHandl
  • 如何在 Ionic 4 上的搜索栏上使用自动完成功能?

    我正在寻找一些例子 但看不到有人用谷歌搜索它 我想要的是硬编码 2 或 3 个单词 非常感谢 我必须在 ionic 3 上寻找吗 还是用 Angular2 更好 在你的 html 文件中