使用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下通过$.browser来判断浏览器.
Apr 05 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
js中常用的Math方法总结
Jan 12 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
vue-cli3 热更新配置操作
Sep 18 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共享内存段示例分享
2014/01/20 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
将PHP程序中返回的JSON格式数据用gzip压缩输出的方法
2016/03/03 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
JS 判断undefined的实现代码
2009/11/26 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
英国网上购买门:Direct Doors
2018/06/07 全球购物
学期研究性学习个人的自我评价
2014/01/09 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
自主实习接收函
2014/01/13 职场文书
新学期开学寄语
2014/01/18 职场文书
cf收人广告词
2014/03/14 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
丧事主持词
2015/07/02 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js