使用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 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
angularJS实现动态添加,删除div方法
Feb 27 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
javascript获取元素的计算样式
May 24 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
使用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/04/18 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP 8新特性简介
2020/08/18 PHP
js中设置元素class的三种方法小结
2011/08/28 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
jquery实现相册一下滑动两次的方法
2015/02/09 Javascript
javascript 正则表达式去空行方法
2017/01/24 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
python list转矩阵的实例讲解
2018/08/04 Python
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
就业自我评价
2014/02/04 职场文书
小松树教学反思
2014/02/11 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
物业经理自我鉴定
2014/03/03 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
2014司机年终工作总结
2014/12/05 职场文书
铁路安全反思材料
2014/12/24 职场文书
医院科室评语
2015/01/04 职场文书
大二学年个人总结
2015/03/03 职场文书
整改通知书格式
2015/04/22 职场文书
行为习惯主题班会
2015/08/14 职场文书
外出听课学习心得体会
2016/01/15 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
MySQL中一条update语句是如何执行的
2022/03/16 MySQL