使用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 多级checkbox选择效果
Aug 20 Javascript
JS面向对象编程之对象使用分析
Aug 19 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
js单词形式的运算符
May 06 Javascript
JavaScript 表单处理实现代码
Apr 13 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 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
制作美丽的拉花
2021/03/03 冲泡冲煮
由php if 想到的些问题
2008/03/22 PHP
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
跟老齐学Python之网站的结构
2014/10/24 Python
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
Python生成器generator原理及用法解析
2020/07/20 Python
Python中return函数返回值实例用法
2020/11/19 Python
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
社团活动总结模板
2014/06/30 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
医德医风个人总结
2015/02/28 职场文书
结婚堵门保证书
2015/05/08 职场文书
安全教育片观后感
2015/06/17 职场文书
《飘》英文读后感五篇
2019/10/11 职场文书
python实现网络五子棋
2021/04/11 Python