使用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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 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+ajax注册实时验证功能
2016/07/20 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
浅析AngularJS中的生命周期和延迟处理
2015/06/18 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
2019/02/22 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
python关键字and和or用法实例
2015/05/28 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
Django静态文件加载失败解决方案
2020/08/26 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
.net软件工程师面试题
2015/03/31 面试题
HR喜欢的自荐信格式
2013/10/08 职场文书
护理专科自荐书范文
2014/02/18 职场文书
运动会开幕式主持词
2014/03/28 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
2014年移动公司工作总结
2014/12/08 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
创业计划书之废品回收
2019/09/26 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python