使用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判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
Vue项目history模式下微信分享爬坑总结
Mar 29 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
vue项目proxyTable配置和部署服务器
Apr 14 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读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
Django日志模块logging的配置详解
2017/02/14 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
公司委托书格式范文
2014/04/04 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
母亲节主题班会
2015/08/14 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
python运算符之与用户交互
2022/04/13 Python
索尼ICF-5900W收音机测评
2022/04/24 无线电