使用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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 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学习之简单计算器实现代码
2011/06/09 PHP
如何用php获取文件名后缀
2013/06/09 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
一个用js实现的页内搜索代码
2007/05/23 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
jquery操作select元素和option的实例代码
2016/02/03 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
现金会计岗位职责
2013/12/05 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
nginx安装以及配置的详细过程记录
2021/09/15 Servers
Django中celery的使用项目实例
2022/07/07 Python