使用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 相关文章推荐
jquery 指南/入门基础
Nov 30 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
echarts实现折线图的拖拽效果
Dec 19 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 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连接mysql数据库代码
2009/03/10 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
jquery判断复选框是否选中进行答题提示特效
2015/12/10 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
微信上传视频文件提示(推荐)
2018/11/22 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
js实现车辆管理系统
2020/08/26 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
Eclipse面试题
2014/03/22 面试题
介绍一下游标
2012/01/10 面试题
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
建筑设计学生的自我评价
2014/01/16 职场文书
大学信息公开实施方案
2014/03/09 职场文书
小学运动会班级口号
2014/06/09 职场文书
会计实训报告范文
2014/11/04 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
公司管理制度范本
2015/08/03 职场文书
工作建议书范文
2019/07/08 职场文书