模糊搜索框（H5），兼容安卓和ios(令人头大的ios输入法)
项目里要可以实现，按照模糊,于是从jq22网站找到一个代码，效果如图：
具体的html代码：（复制，需要引入jq相关的支持文件）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>模糊搜索</title>
<script id="jquery_183" type="text/javascript" class="library" src="jquery-1.11.1.min.js"></script> <style>
* {
padding: 0;
margin: 0;
}
body {
background: #fff;
}
h2 {
margin-bottom: 20px;
}
#container {
width: 500px;
text-align: center;
margin: 0 auto;
font-family: "微软雅黑";
margin-top: 50px;
}
.selectContainer {
position: relative;
}
.selectInput {
width: 200px;
height: 25px;
border-style: none;
border: 1px solid #999;
border-radius: 3px;
padding: 0 3px;
}
.picture_click {
background: url(http://sandbox.runjs.cn/uploads/rs/382/gzpur0hb/select-default.png) no-repeat;
opacity: 1;
width: 15px;
height: 8px;
position: absolute;
top: 10px;
right: 125px;
}
.picture_click:hover {
background-image: url(http://sandbox.runjs.cn/uploads/rs/382/gzpur0hb/select-hover.png);
}
.selectList {
width: 206px;
height: 212px;
overflow-y: scroll;
text-align: left;
margin: 0 172px;
border: 1px solid #999;
display: none;
position: relative;
}
.selectList div {
cursor: pointer;
}
</style>
<script>
//初始化下拉框
initSearchInput(); function fuzzySearch(e) {
var that = this;
//获取列表的ID
var listId = $(this).attr("list");
//列表
var list = $('#' + listId + ' div');
//列表项数组 包列表项的id、内容、元素
var listArr = [];
//遍历列表，将列表信息存入listArr中
$.each(list, function(index, item){
var obj = {'eleId': item.getAttribute('id'), 'eleName': item.innerHTML, 'ele': item};
listArr.push(obj);
}) //current用来记录当前元素的索引值
var current = 0;
//showList为列表中和所输入的字符串匹配的项
var showList = [];
//为文本框绑定键盘引起事件
$(this).keyup(function(e){
//如果输入空格自动删除
this.value=this.value.replace(' ','');
//列表框显示
$('#' + listId).show();
if(e.keyCode == 38) {
//up
console.log('up');
current --;
if(current <= 0) {
current = 0;
}
console.log(current);
}else if(e.keyCode == 40) {
//down
console.log('down');
current ++;
if(current >= showList.length) {
current = showList.length -1;
}
console.log(current); }else if(e.keyCode == 13) {
//enter
console.log('enter');
//如果按下回车，将此列表项的内容填充到文本框中
$(that).val(showList[current].innerHTML);
//下拉框隐藏
$('#' + listId).hide();
}else {
//other
console.log('other');
//文本框中输入的字符串
var searchVal = $(that).val();
showList = [];
//将和所输入的字符串匹配的项存入showList
//将匹配项显示，不匹配项隐藏
$.each(listArr, function(index, item){
if(item.eleName.indexOf(searchVal) != -1) {
item.ele.style.display = "block";
showList.push(item.ele);
}else {
item.ele.style.display = 'none';
}
})
console.log(showList);
current = 0;
}
//设置当前项的背景色及位置
$.each(showList, function(index, item){
if(index == current) {
item.style.background = "#eee";
$('#' + listId).scrollTop(item.offsetTop);
}else {
item.style.background = "";
}
})
//设置下拉框的高度
//212为列表框的最大高度
if(212 > $('#' + listId + ' div').eq(0).height() * showList.length) {
$('#' + listId).height($('#' + listId + ' div').eq(0).height() * showList.length);
}else {
$('#' + listId).height(212);
}
})
} function initSearchInput() {
//给下拉箭头绑定点击事件 点击下拉箭头显示/隐藏对应的列表
//输入框的类名为selectInput
//下拉箭头的类名为picture_click、dropDowns
//下拉列表的类名为selectList
for(var i = 0; i < $('.picture_click').length; i++) {
$('.picture_click').eq(i).click(function(){
$(this).parent().find('.selectList').toggle();
})
}
//为列表中的每一项绑定鼠标经过事件
$('.selectList div').mouseenter(function(){
$(this).css("background", "#eee").siblings().css("background", "");
});
//为列表中的每一项绑定单击事件
$('.selectList div').click(function(){
//文本框为选中项的值
$(this).parent().parent().find('.selectInput').val($(this).html());
//下拉框隐藏
$(this).parent().hide();
}); //点击下拉框外部的时候使下拉框隐藏
var dropDowns = document.getElementsByClassName('dropDowns');
var selectList = document.getElementsByClassName('selectList');
document.body.onclick = function(e){
e = e || window.event;
var target = e.target || e.srcElement;
for(var i = 0; i < dropDowns.length; i++) {
if(target != dropDowns[i] && target != selectList[i]){
selectList[i].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<div id="container">
<h2>模糊搜索</h2>
<div id="cityContainer" class="selectContainer">
<label>城市：</label>
<input type="text" placeholder="请输入城市名称" list="listps" class="selectInput" name="cityName" id="cityName" value="" onfocus="fuzzySearch.call(this)" />
<div class="picture_click dropDowns" style=""></div>
<div id="cityList" class="selectList">
<div id="001">北京</div>
<div id="002">上海</div>
<div id="003">杭州</div>
<div id="004">安庆</div>
<div id="005">大兴安岭</div>
<div id="006">安阳</div>
<div id="007">广州</div>
<div id="008">贵阳</div>
<div id="009">哈尔滨</div>
<div id="010">合肥</div>
<div id="011">邯郸</div>
<div id="012">呼伦贝尔</div>
<div id="013">淮南</div>
<div id="014">黄山</div>
<div id="015">济南</div>
<div id="016">济宁</div>
<div id="017">嘉兴</div>
<div id="018">南昌</div>
<div id="019">南通</div>
<div id="020">南宁</div>
<div id="021">南京</div>
</div> </div>
</div>
</body>
</html>
修改的第一版：按照名称进行模糊查询：
搜索效果：
，
添加，每行的颜色渐变：
//文本框中输入的字符串
var searchVal = $(that).val();
showList = [];
//将和所输入的字符串匹配的项存入showList
//将匹配项显示，不匹配项隐藏
$.each(listArr, function (index, item) {
console.log("item" + item.eleName);
if (item.eleName.indexOf(searchVal) != -1) {
item.ele.style.display = "block";
showList.push(item.ele);
} else {
item.ele.style.display = 'none';
}
}) //设置当前项的背景色及位置
$.each(showList, function (index, item) {
// console.log("index===" + index % 2)
if (index % 2 == 1) {
item.style.background = "#d6e4ff";
} else {
item.style.background = "#ffffff";
}
})
跟ios浏览器显示的较劲，首先区别于安卓微信的x5浏览器，苹果手机的微信浏览器不支持，keyup，的事件，输入内容后，无法正常检索，实现模糊查询的功能，
于是上网找到了input的方法；
inupt方法，可以正常触发搜索框内容改变的事件，但是在ios输入法，输入字符串成效果会先把拼音加载到输入框，导致输入框出现乱码；解决方法，加入了compositionstart，compositionend的方法，这个东西相当于一个开关，当你输入完成后，给搜索框一个结果，现在可以检索了，就如同一个钥匙，把门开开后，你就不翻墙，就可以光明正大的走出来了。代码如下：
var node = this;
var inputLock = false;
node.addEventListener('compositionstart', function (e) {
inputLock = true;
//console.log("satart" + e.data)
}) node.addEventListener('compositionupdate', function (e) {
// console.log("update"+e.data)
})
node.addEventListener('compositionend', function (e) {
inputLock = false;
// console.log("end" + e.data)
})
// console.log("inputlock"+inputLock)
if (!inputLock) {
bind_name = 'input';
}
//var bind_name = 'propertychange'; $(this).bind(bind_name, function (e) {
//查询内容
xxx
}）
因为涉及到多个页面的使用和判断，这里就不把详细的代码帖出来了，最原始的代码给了大家，各个坑也给大家填了不少，其他就看自己的需求了。
模糊搜索框（H5），兼容安卓和ios(令人头大的ios输入法)的更多相关文章
- h5开发安卓机型点击输入框调起输入法，输入框被键盘遮挡的解决方法
前言: 从以前的项目中找一个问题的解决方案,顺带找到了这个安卓机型调起输入法,页面没有自动上滑导致输入框被弹起的键盘遮挡的解决方案.这个问题只有安卓机型页面中的输入框处于底部(也就是底部键盘区域)的时 ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
- 移动端H5制作安卓和IOS的坑 持续更新...
移动端H5制作安卓和IOS的坑 持续更新... 前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑.踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来, ...
- 兼容安卓和ios实现一键复制内容到剪切板
实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- H5与安卓、IOS的交互，判断微信、移动设备、安卓、ios
一.通过用户代理可以判断网页当前所在的环境 var browser={ versions:function(){ var u = navigator.userAgent, app = navigato ...
- h5与安卓、ios交互
1.安卓交互 h5调用安卓方法 window.webview.xxx() 安卓调用h5方法, 方法需要在全局注册 window['showUnreadMsg'] = () => { this.$ ...
- 通过电脑浏览器调试真机h5兼容问题
前言 在h5开发过程中,起初我们使用PC浏览器的手机模式打开开发中的页面,并使用控制台进行调试,但实际真机兼容性问题无法调试到:在这种情况下,我们通常使用vConsole(即移动端的控制台)来调试,但 ...
- 兼容安卓的javaproject1.0
<pre class="java" name="code"> //兼容安卓的系统package cn.com.likeshow; import ja ...
- vue打包app嵌入h5，区分app进入和android，ios显示不同的下载链接
vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接 需求:自己app打开的登录页面不显示app下载链接.其他地方打开判断android手机的跳转到android下载页链 ...
随机推荐
- 理解C#反射
参考文章:http://blog.csdn.net/educast/article/details/2894892 上面的文章将C#反射要用到的方法都给出了,下面我将写个例子,帮助理解 [1.使用反射 ...
- OGNL与值栈
一.OGNL入门 1.什么是OGNL OGNL的全称是对象图导航语言(Object-Graph Navigation Language),它是一种功能强大的开源表达式语言.使用这种表达式语言,可以通过 ...
- WPF基础控件
1.所有基础控件结束(英文) http://www.dotnetperls.com/tooltip-wpf 2.wpf- DataGrid 常用属性和事件 3.
- JS实现图片预览与等比缩放
案例仅为图片预览功能,省略图片上传步骤,框架为easyui. HTML代码: @*text-align:center;水平居中 vertical-align: middle;display: tabl ...
- ASP.NET 4.5.256 尚未在Web服务器上注册。
最近在网上下载的一个原型用VS2012打开报错如下: 解决方法: 打开网址:http://blogs.msdn.com/b/webdev/archive/2014/11/11/dialog-box-m ...
- Vue-[v-model]理解示例
对应文档节点: https://vuefe.cn/v2/guide/components.html#Customizing-Component-v-model <body> <div ...
- [android] android通信协议
1.数据区分 手机端:常量存储 服务器端:数据库建表存储 2.数据来源 android,ios,pc,wap 3.数据采集,数据挖掘 IMEI:设备编号 IMSI:SIM卡编号 4.数据加密 4.1R ...
- 一：SpringIOC&DI
一:spring 1.spring介绍 spring负责管理项目中的所有对象,看作是项目中对象的管家. spring一站式框架: spring框架性质是属于容器性质的 容器中装什么对象就有什么功能,所 ...
- hdu 1011 树形背包
http://blog.csdn.net/libin56842/article/details/9876503 这道题和poj 1155的区别是: poj1155是边的价值,所以从边的关系入手 hdu ...
- Linux 更新python至2.7后ImportError: No module named _ssl
原文:http://blog.51cto.com/hunt1574/1630961 编译安装python 2.7后无法导入ssl包 解决办法: 1 下载地址:http://www.openssl.or ...