使用JS轻松实现ionic调用键盘搜索功能(超实用)


Posted in Javascript onSeptember 06, 2016

这个需求是产品提的,一开始只是设置了 <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调用键盘搜索功能(超实用),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
浅析node.js中close事件
Nov 26 Javascript
24款热门实用的jQuery插件推荐
Dec 24 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
vue实现动态数据绑定
Apr 28 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
vue实现数字滚动效果
Jun 29 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 #Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 #Javascript
原生JS:Date对象全面解析
Sep 06 #Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 #Javascript
Vue.js每天必学之过渡与动画
Sep 06 #Javascript
Vue.js 父子组件通讯开发实例
Sep 06 #Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 #Javascript
You might like
编写自己的php扩展函数
2006/10/09 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP学习之正则表达式
2011/04/17 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
设定php简写功能的方法
2019/11/28 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
js获取ip和地区
2017/03/10 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
python使用PyGame模块播放声音的方法
2015/05/20 Python
python实现的希尔排序算法实例
2015/07/01 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
2015年发展党员工作总结报告
2015/03/31 职场文书
致运动员赞词
2015/07/22 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers