使用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 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
php启用zlib压缩文件的配置方法
2013/06/12 PHP
php截取视频指定帧为图片
2016/05/16 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
python解析含有重复key的json方法
2019/01/22 Python
python读文件的步骤
2019/10/08 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
python speech模块的使用方法
2020/09/09 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
秘书行业自我鉴定范文
2013/12/30 职场文书
酒店端午节促销方案
2014/02/18 职场文书
企业员工薪酬方案
2014/06/04 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
离婚协议书标准格式
2014/10/04 职场文书
高中班主任心得体会
2016/01/07 职场文书