使用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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
JQuery性能优化的几点建议
May 14 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 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 开源AJAX框架14种
2009/08/24 PHP
PHP 实用代码收集
2010/01/22 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
python zip文件 压缩
2008/12/24 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
我就是这样学习Python中的列表
2019/06/02 Python
Python线程指南分享
2019/11/19 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Django封装交互接口代码
2020/07/12 Python
利用python汇总统计多张Excel
2020/09/22 Python
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
华为python面试题
2016/05/03 面试题
应聘教师推荐信
2013/10/31 职场文书
物流专业大学应届生求职信
2013/11/03 职场文书
综合办公室主任职责
2013/12/16 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Python OpenCV快速入门教程
2021/04/17 Python
Python 阶乘详解
2021/10/05 Python
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技