使用JS轻松实现ionic调用键盘搜索功能(超实用)
这个需求是产品提的,一开始只是设置了 <input style="padding-top: 3px;" type="search" placeholder="搜索医生或医院" ng-model="query">
type="search"
发现android上可以ios调取不出search健来,气死我了,经过google的搜索得到结论,需要在外面套用一个form表单,于是加上果然好使而且结合了form表单提交的事件直接调用了button 按钮的点击事件ng-click="searchSelect()",不需要额外再去监听搜索键盘点击事件,省了一大堆的麻烦,果然很实用啊,我真是个天才
hml代码如下:
<form> <div class="bar bar-header item-input-inset" style="height: 50px;"> <label class="item-input-wrapper" id="search-input"> <i class="icon ion-ios-search" style="position: relative;color: gray;font-size: 1.5em;top: 1px;"></i> <input style="padding-top: 3px;" type="search" placeholder="搜索医生或医院" ng-model="query"> </label> <button class="button button-clear" style="color: #49B746;" ng-click="searchSelect()">搜索</button> </div> </form>
js代码如下:
$scope.searchSelect = function(){ if ($scope.currentSearchType == 'hospital'){ }else{ $scope.search(); } };
以上所述是小编给大家介绍的使用JS轻松实现ionic调用键盘搜索功能(超实用),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
Ionic默认的Tabs模板使用实例
Ionic 默认的Tabs 模板 ,Android的在上方,IOS的在下方.在www/js/app.js修改配置,添加一个变量,再修改相应属性: .config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {$ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicConfigProvider.platform.ios.tabs.pos
-
ionic组件ion-tabs选项卡切换效果实例
介绍 ion-tabs是ionic中的选项卡组件,路由使用的是angular-ui-router.js.因此必须先掌握uiRoute. 效果图 实例代码 index.html <body ng-app="starter"> <!--ion-nav-view用来渲染模板--> <ion-nav-view></ion-nav-view> </body> tab-index.html <ion-tabs class="
-
如何解决IONIC页面底部被遮住无法向上滚动问题
Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它 提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用.提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择. ionic 特点 1.ionic 基于Angular语法,简单易学.[3] 2.ionic 是一个轻量级框架. 3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, MVVM ,代
-
ionic隐藏tabs的方法
本文为大家分享了ionic隐藏tabs的方法,供大家参考,具体内容如下 1. <ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}"> <!-- tabs --> </ion-tabs> 2. 在该控制器下加上.directive: var module = angular.module('app.directives', []); module.directive('showTabs', fu
-
ionic中列表项增加和删除的实现方法
在项目中遇到表单似的页面,需要进行增加一行和减少一行的操作,例如: 要实现可以选中商品,以及对商品的信息列表进行显示与否的操作 html代码如下: <div class="chanpinxiangqing"> <div class="item item-divider">产品明细</div> <div class="chanpinxiangqing" ng-repeat="master in m
-
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案. 我就不仔细讲代码了,直接上图 angular.module('MyApp') .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$io
-
使用JS轻松实现ionic调用键盘搜索功能(超实用)
这个需求是产品提的,一开始只是设置了 <input style="padding-top: 3px;" type="search" placeholder="搜索医生或医院" ng-model="query"> type="search" 发现android上可以ios调取不出search健来,气死我了,经过google的搜索得到结论,需要在外面套用一个form表单,于是加上果然好使而且结合了f
-
Ext JS 实现建议词模糊动态搜索功能
代码: new Ext.form.ComboBox({ store: new Ext.data.JsonStore({ idProperty: 'VehicleNo', url: '../ajax/test.ashx, fields: ['VehicleNo', 'phoneNum'] }), id:'querynodesid', emptyText:'快速检索', hiddenName: 'VehicleNo', displayField: 'VehicleNo', valueField: '
-
js调用百度地图及调用百度地图的搜索功能
js调用百度地图的方法 代码如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&
-
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
与上篇实践教程一样,在这篇文章中,我将继续从一种常见的功能--表格入手,展示Vue.js中的一些优雅特性.同时也将对filter功能与computed属性进行对比,说明各自的适用场景,也为vue2.0版本中即将删除的部分filter功能做准备. 需求分析 还是先从需求入手,想想实现这样一个功能需要注意什么.大致流程如何.有哪些应用场景. 表格本身是一种非常常用的组件,用于展示一些复杂的数据时表现很好. 当数据比较多时,我们需要提供一些筛选条件,让用户更快列出他们关注的数据. 除了预设的一些筛选条
-
Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现
最近跳槽去新公司,接受的第一个任务是在 一个电商模块的搜索功能以及搜索历史记录的实现. 需求和淘宝等电商的功能大体差不多,最上面一个搜索框,下面显示搜索历史记录.在EditText里输入要搜索的关键字后,按软键盘的搜索按键/延迟xxxxms后自动搜索.然后将搜索的内容展示给用户/提示用户没有搜到相关信息. 历史记录是按时间排序的,最新的在前面,输入以前搜索过的关键字,例如牛仔裤(本来是第二条),会更新这条记录的时间,下次再看,牛仔裤的排列就在第一位了.并且有清除历史记录的功能. 整理需求,大致需
-
JS实现仿google、百度搜索框输入信息智能提示的实现方法
本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu
-
JS实现带导航城市列表以及输入搜索功能
本文实例为大家分享了JS实现带导航城市列表以及输入搜索功能展示的具体代码,供大家参考,具体内容如下 实现功能: 1.加载城市列表,并生成索引(没有该索引的城市则无索引) 2.点击索引滚动页面到对应索引城市第一个位置 3.输入搜索 分析: 1.加载城市很容易,生成对应的索引. 首先需要得到所有的城市,然后拿出城市的首字母,放入一个数组中,去重并排序, 得到无重复并有序的索引数组后加入到div中显示 2.根据索引进行页面滚动 需要给索引列表添加事件,由于锚点会在链接产生带#号的地址,以及页面会有刷动
-
JS 实现百度搜索功能
今天我们来用JS实现百度搜索功能,下面上代码: HTML部分: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--百度iocn图标--> <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" rel="external nofol
-
vue 实现移动端键盘搜索事件监听
1.首先注意,input的type="serch" <input @keypress="searchGoods" type="serch" placeholder="搜索商品"> 2.监听keypress事件 (1)KeyDown.KeyUp 事件 这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的.(要解释 ANSI 字符,应使用 KeyPress 事件.) (
-
js实现百度淘宝搜索功能
本文实例为大家分享了js实现百度淘宝搜索功能的具体代码,供大家参考,具体内容如下 由于没有后台数据,用数组模拟一下后台返回的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
随机推荐
- Android GZip的使用-开发中网络请求的压缩实例详解
- 通过修改360抢票的刷新频率和突破8车次限制实现方法
- javascript的解析执行顺序在各个浏览器中的不同
- PHP队列用法实例
- android输入框与文本框加滚动条scrollview示例
- ASP编程入门进阶(十八):FSO组件之文件操作(上)
- C# HttpClient Cookie验证解决方法
- js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
- Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
- asp中向文本框输出数据原样式的函数
- jQuery模拟select实现下拉菜单功能
- JS+ACTIVEX实现网页选择本地目录路径对话框
- php中fgetcsv()函数用法实例
- bootstrap table配置参数例子
- Android学习之Fragment
- 详解Spring boot Admin 使用eureka监控服务
- Python之web模板应用
- Java微信公众平台之群发接口(高级群发)
- JS正则表达式常见用法实例详解
- Python分析彩票记录并预测中奖号码过程详解