使用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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
jquery select2的使用心得(推荐)
Dec 04 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
Vue与React的区别和优势对比
Dec 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中文字符串截取方法实例总结
2014/09/30 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
JScript的条件编译
2007/05/29 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
js弹出层永远居中实现思路及代码
2013/11/29 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
python实现简单遗传算法
2020/09/18 Python
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
建筑专业毕业生推荐信
2013/11/21 职场文书
庆元旦文艺演出主持词
2014/03/27 职场文书
采购意向书范本
2014/03/31 职场文书
公司节能减排方案
2014/05/16 职场文书
党员思想汇报材料
2014/12/19 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
python之django路由和视图案例教程
2021/07/26 Python