MUI 语音搜索框

<div id="search-area">
<div class="mui-input-row mui-search mui-active" style="width: 85vw; display: inline-block;margin-left: 5px;">
<input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="" data-input-clear="2" data-input-speech="2" data-input-search="2">
<span class="mui-icon mui-icon-clear mui-hidden"></span>
<span class="mui-icon mui-icon-speech"></span>
<span class="mui-placeholder">
<span class="mui-icon mui-icon-search" id="search-btn"></span>
<span>带语音输入的搜索框</span>
</span>
</div>
<div id="search-text">搜索</div>
</div>

  

	//	语音输入
	var text = null;

	function startRecognize() {
		var options = {};
		options.engine = ‘iFly‘;
		options.punctuation = false; // 是否需要标点符号
		text = "";
		console.log("开始语音识别:");
		plus.speech.startRecognize(options, function(s) {
			console.log(s);
			text += s;
			document.getElementById(‘search‘).value = text;
		}, function(e) {
			console.log("语音识别失败:" + e.message);
			alert("语音识别失败:" + e.message);
		});
		setTimeout(stopRecognize, 10000);
	}
//	停止语音输入
	function stopRecognize() {
		plus.speech.stopRecognize();
	}

  

时间: 2024-10-21 05:55:13

MUI 语音搜索框的相关文章

JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log("aaaaa"); }); JQ: $("input对象").bind("input  propertychange",function(){ console.log("aaaaa"); }): MUI 清除按钮的点击的监听:

iOS - Swift UISearchController仿微信搜索框

0x01.创建一个UISearchController 如果传入的searchController为nil,则表示搜索的结果在当前控制器中显示,现在我让它在searchVC中显示. // 创建searchResultVC let searchVC = UIViewController() // 设置背景颜色为红色 searchVC.view.backgroundColor = UIColor.red let searchController = UISearchController(search

android浮动搜索框的使用

引言 在我们的应用程序中经常需要提供搜索服务,比如搜索联系人, 搜索商品信息等等.我们可以自己在布局中自定义我们的搜索框,实现我们的搜索逻辑.但是还有一种更简单的方法:使用android系统给我们提供的搜索功能框架. 在android中,提供两种实现搜索功能的方式:search dialog 和 searchView. search dialog类似于普通的dialog,悬浮于我们的窗体之上.示例图如下: searchView通常被嵌套在我们的布局之中,最典型的案例就是在actionBar中使用

一个搜索框的背后

要想做好一个让用户喜欢的搜索功能太难了. 首先,不说界面兼容问题,假设在IE6+.FF.Chrome.Safari.Opera等浏览器下显示正常,不出现错位,字体和搜索框距离大小不一等问题. 您所使用的或者开发的搜索功能包含以下几点呢? 1)进入首页,光标默认在搜索框内.光标离开搜索框,搜索框内显示“请输入关键词”等. 2)当不输入任何关键词,点击搜索仍然会停留在当前页.这里不建议弹出对话框的方式提示用户“请输入关键字”等字样. 3)输入关键词,出现关键词模糊匹配提示下拉框,其中模糊匹配包括英文

语音搜索

经常逛淘宝不知道多少人用过淘宝搜索栏的语音搜索.(如下图黄色方框所示). 然而今天无意间看到了语音搜索,起初我以为会很复杂,搜索了一下才发现代码如此之简单,html5的功能如此之强大.其实只需一行代码就可搞定: x-webkit-speec 但是语音搜索只适合语音搜索只支持webkit内核浏览. 先看代码: 然后我们可以看一下运行结果:(这种效果显示为360浏览器) 此效果为firefox浏览器,就像普通文本框一样. 示例: 解释一下参数的含义: x-webkit-speech:就是让输入框的右

讯飞语音云助力赶集网推出语音搜索 推动生活服务智能应用

近日,全球首个免费开放的智能语音交互平台与国内最大分类信息门户网站之赶集网完美联姻,由讯飞语音云为赶集网手机客户端提供语音搜索本地生活服务功能,用户可通过赶集生活新版APP体验该全新功能. 讯飞语音云,致力于为开发者打造一站式智能人机交互解决方案,免费开放了全球领先的语音识别.语音合成和语义理解等核心技术,让应用具备能听会说会思考的能力:同时开放了业界领先的应用统计分析平台,简单集成,便可全面掌控应用的发展趋势:与此同时,语音唤醒.个性化彩铃.应用分发等能力也相继开放,与开发者携手共赢,共创精彩

Win10系统任务栏显示Cortana搜索框的设置方法

我们都知道Win10系统带有Cortana搜索功能,并且可以进行语音输入,要找文件或者软件程序非常的方便.那么怎么在任务栏上显示Cortana的搜索功能呢?下面就来介绍一下Cortana搜索功能怎么在任务栏上设置打开显示或者关闭. Win10任务栏上Cortana搜索设置打开显示或隐藏的方法 1.右键点击任务栏,找到"Cortana",会发现Cortana搜索功能是被默认隐藏的,我们只需要选择下面两个即可.2."显示Cortana图标"就是只有一个图标,"

mui的input框在IOS系统下无法聚焦或点击多次才能聚焦

我在给公司的一个H5页面添加搜索框,前端原先就用的mui,正常添加input框后,手机测试出现了问题: Android : input框有内容搜索跳转后,按返回键,input不能聚焦,键盘不弹出 IOS : 正常进入页面input框不能聚焦,键盘不弹出,多次点击可能会聚焦 代码如下: <div> <a class="mui-btn mui-btn-link" style="float: right;width: 14.5%;height: 34px;&quo

Android零基础入门第62节:搜索框组件SearchView

原文:Android零基础入门第62节:搜索框组件SearchView 一.SearchView概述 SearchView是搜索框组件,它可以让用户在文本框内输入文字,并允许通过监听器监控用户输入,当用户输入完成后提交搜索时,也可通过监听器执行实际的搜索. SearchView默认是展示一个search的icon,点击icon展开搜索框,也可以自己设定图标.用SearchView时可指定如下表所示的常见XML属性及相关方法. 如果为SearchView增加一个配套的ListView,则可以为Se