1. 对input框中输入的字符进行匹配，将匹配到的内容以菜单的形式展现在 input框的下方； 2. 只针对英文字符进行匹配，并且匹配到的内容在菜单中加粗； 3. 通过键盘上的上下箭头可以对菜单进行选择，按下回车后将选中的内容写入到 input框中；
[问答题]
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>输入框下拉提示</title>
<style>
*{
margin:0;
padding:0;
}
body{
font-size:14px;
font-family:"Microsoft yahei";
}
.divCon{
width:300px;
margin:100px auto;
}
#string{
width:200px;
height:30px;
}
#strul{
width:200px;
}
</style>
</head>
<body>
<form id="inform" name="inform" class="divCon" action="" method="post">
<input id="string" name="string" class="input" type="text/plain" value=""/>
</form>
<ul id="strul">
</ul>
<script type="text/javascript">
window.onload=function(){
var frm=document.getElementById("inform");
var input=document.getElementById("string");
var ul=document.getElementById("strul");
ul.style.position="absolute";
ul.style.top=(input.offsetTop+input.offsetHeight)+"px";
ul.style.left=input.offsetLeft+"px";
var arr=["a","aa","aaa","b","bb","bbb","aab"];
var len=arr.length;
//根据输入匹配，显示下拉框
input.selectedIndex=-1;
input.focus();
input.onkeyup=function(event){
ul.innerHTML="";
ul.style.borderWidth="1px";
ul.style.borderStyle="solid";
ul.style.borderColor="#999";
var value=input.value;
if(value){
var reg=new RegExp("^"+value+"+");//当输入框为空的时候会报错
for(var i=0;i<len;i++){
if(reg.test(arr[i])){
var li=document.createElement("li");
//匹配部分变粗
var matchlen=value.length;
var string=arr[i].substr(matchlen);
li.innerHTML="<strong>"+value+"</strong>"+string;
li.style.listStyle="none";
ul.appendChild(li);
}
}
}
//获取所有的li节点
var li=document.getElementsByTagName("li");
for(var j=0,lilen=li.length;j<lilen;j++){
li[j].onmouseover=function(){
this.style.backgroundColor="#ececec";
}
li[j].onmouseout=function(){
this.style.backgroundColor="#fff";
}
li[j].onclick=function(){
input.value=this.innerText||this.textContent;
ul.innerHTML="";
ul.style.border="none";
}
}
input.options=li;
event=event||window.event;//获取事件
//var kc=event.keyCode||event.charCode;
switch(event.keyCode){
case 38://上箭头
clearcolor(this);
this.selectedIndex--;
if(this.selectedIndex<0){
this.selectedIndex=this.options.length-1;
}
//this.value=this.options[this.selectedIndex].innerHTML;
paintcolor(this);
break;
case 40://下箭头
clearcolor(this);
this.selectedIndex++;
if(this.selectedIndex>this.options.length-1){
this.selectedIndex=0;
}
//this.value=this.options[this.selectedIndex].innerHTML;
paintcolor(this);
break;
case 13://回车
if(this.selectedIndex>=0){
var str=this.options[this.selectedIndex].innerHTML;
this.value=str.replace(/[<strong><\/strong>]/g,"");
}
ul.innerHTML="";
ul.style.border="none";
break;
}
}
}
function clearcolor(target){
if(target.selectedIndex>=0){
target.options[target.selectedIndex].style.backgroundColor="#fff";
}
}
function paintcolor(target){
if(target.selectedIndex>=0){
target.options[target.selectedIndex].style.backgroundColor="#ececec";
}
}
</script>
</body>
</html>
发表于 2017-08-19 15:30:10
回复(0)
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>input</title>
<style>
*{
margin:0;
padding:0;
}
#frm{
width:300px;
margin:100px auto;
border:1px solid #eee;
}
#put{
width:200px;
height:30px;
}
#sh{
width:200px;
border:1px solid red;
}
#sh li{
list-style:none;
}
</style>
<script>
window.onload=function(){
var frm=document.getElementById("frm");
var input=document.getElementById("put");
var ul=document.getElementById("sh");
//alert(input.offsetLeft);
//alert(input.offsetTop);
ul.style.position="absolute";
ul.style.top=(input.offsetTop+33)+'px';
ul.style.left=input.offsetLeft+'px';
ul.style.height='200px';
var arr=["a","aa","aaa","b","bb","bbb"];
//alert(input.value);
input.onkeyup=function(){
//根据输入匹配，并将所有匹配显示出来
ul.innerHTML="";
var str=input.value;
//alert(str);
var regStr = eval("/^"+str+"+/");
for(var i=0;i<arr.length;i++){
//alert(arr[i]);
if(regStr.test(arr[i])){
//alert(arr[i])
var li=document.createElement("li");
//alert(li);
//匹配的部分内容变粗
var len=str.length;
var string=arr[i].substr(len);
li.innerHTML='<strong>'+str+'</strong>'+string;
//alert(li.innerText);
ul.appendChild(li);
//alert("sd");
}
}
//用鼠标选择li中的内容，并把input的内容替换为选中的值
var lis=document.getElementsByTagName("li");
//alert(lis.length);
for(var j=0;j<lis.length;j++){
lis[j].onmouseover=function(){
this.style.backgroundColor="#eee";
}
lis[j].onmouseout=function(){
this.style.backgroundColor="#fff";
}
lis[j].onclick=function(){
//alert(this.innerHTML);
input.value=this.innerText||this.textContent;
}
}
}
}
</script>
</head>
<body>
<form id="frm">
<input type="text" name="put" id="put" value="haha" />
</form>
<ul id="sh">
</ul>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>input</title>
<style>
*{
margin:0;
padding:0;
}
#frm{
width:300px;
margin:100px auto;
border:1px solid #eee;
}
#put{
width:200px;
height:30px;
}
#sh{
width:200px;
border:1px solid red;
}
#sh li{
list-style:none;
}
</style>
<script>
window.onload=function(){
var frm=document.getElementById("frm");
var input=document.getElementById("put");
var ul=document.getElementById("sh");
//alert(input.offsetLeft);
//alert(input.offsetTop);
ul.style.position="absolute";
ul.style.top=(input.offsetTop+33)+'px';
ul.style.left=input.offsetLeft+'px';
ul.style.height='200px';
var arr=["a","aa","aaa","b","bb","bbb"];
//alert(input.value);
input.onkeyup=function(){
//根据输入匹配，并将所有匹配显示出来
ul.innerHTML="";
var str=input.value;
//alert(str);
var regStr = eval("/^"+str+"+/");
for(var i=0;i<arr.length;i++){
//alert(arr[i]);
if(regStr.test(arr[i])){
//alert(arr[i])
var li=document.createElement("li");
//alert(li);
//匹配的部分内容变粗
var len=str.length;
var string=arr[i].substr(len);
li.innerHTML='<strong>'+str+'</strong>'+string;
//alert(li.innerText);
ul.appendChild(li);
//alert("sd");
}
}
//用鼠标选择li中的内容，并把input的内容替换为选中的值
var lis=document.getElementsByTagName("li");
//alert(lis.length);
for(var j=0;j<lis.length;j++){
lis[j].onmouseover=function(){
this.style.backgroundColor="#eee";
}
lis[j].onmouseout=function(){
this.style.backgroundColor="#fff";
}
lis[j].onclick=function(){
//alert(this.innerHTML);
input.value=this.innerText||this.textContent;
}
}
}
}
</script>
</head>
<body>
<form id="frm">
<input type="text" name="put" id="put" value="haha" />
</form>
<ul id="sh">
</ul>
</body>
</html>
发表于 2015-11-10 22:04:26
回复(0)
<!--jQuery版本 写的巨烂。。-->
<!DOCTYPE html>
<html>
<head>
<title>输入框自动匹配</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
form{
padding-top:300px;
}
#match{
width: 300px;
height: 30px;
}
#main{
position: relative;
width: 300px;
margin: 300px auto;
}
#drop{
width: 300px;
position: absolute;
top:36px;
border: 1px solid black;
padding: 0px;
display: none;
margin: 0px;
}
#drop li{
margin: 0px;
list-style-type: none;
}
#drop li:hover{
background: #ececec;
}
.beSelected{
background: #ececec;
}
</style>
</head>
<body>
<div id="main">
<input id="match" type="text">
<ul id="drop">
</ul>
</div>
<script>
$(function(){
var res=['a','ab','abc','bba','bb','bbc','bbb'];
var flag=true;
var a="aaaa";
var $drop=$("#drop");
$("#match").keyup(function(e){
var value=$(this).val();
var flag=true;
if(e.keyCode==38||e.keyCode==40||e.keyCode==13){
flag=false;
}
else{
flag=true;
}
if(flag){
if(value){
var reg=new RegExp("^"+value+"+");
$drop.show();
$drop.empty();
for(var i=0;i<res.length;i++){
if(reg.test(res[i])){
if(res[i]==value){
$drop.append("<li><strong>"+res[i]+"</strong></li>");
}
else{
$drop.append("<li>"+res[i]+"</li>");
}
}
}
}
else{
$drop.empty();
$drop.hide();
}
}
});
$drop.on("mousemove",$("#drop li"),function(){
$("#drop li").each(function(){
$(this).click(function(){
var value=$(this).text();
$("#match").val(value);
$drop.hide();
})
})
});
var i=0;
$(document).keydown(function(e){
var dire=e.keyCode;
switch(dire){
case 40: i++;
if(i>$("#drop li").length-1)
i=0;
break;
case 38: i--;
if(i<0)
i=$("#drop li").length-1;
break;
case 13:
var value= $("#drop li").eq(i-1).text();
$("#match").val(value);
$drop.hide();
break;
}
$("#drop li").eq(i-1).addClass("beSelected").siblings().removeClass("beSelected");
})
});
</script>
</body>
</html>
发表于 2017-12-01 19:26:51
回复(0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#wrapper{
width:350px;
margin:auto;
position:relative;
}
#search{
width:350px;
line-height:35px;
border:1px solid deepskyblue;
display:block;
margin:auto;
margin-top:100px;
}
ul,li{
margin:0;
padding:0;
}
ul{
display:none;
position:absolute;
border:1.5px solid #000;
top:38px;
left:0;
}
li{
list-style:none;
width:350px;
line-height:30px;
border-bottom:1px solid grey;
}
.focus{
background:skyblue;
}
</style>
</head>
<body>
<div id='wrapper'>
<input id='search' type='text' placeholder="请输入查找内容"/>
<ul id='result'>
</div>
</ul>
<script>
var arr = ['a','aa','aaa','b','bbb','c','aabcd'];
var search = document.getElementById('search');
var result = document.getElementById('result');
//拿到焦点的li元素下标
var initial = 0;
function searchResult(e){
intial = 0;
var e = e || window.event;
var str = e.target.value;
var keyCode = e.keyCode;
var reg = new RegExp(str);
var oList = '';
for(let i in arr){
//将匹配的选项拼接成子节点字符串
if(reg.test(arr[i])){
var emStr = '<li><em>'+ str;
var restStr = arr[i].substring(str.length+1);
oList += emStr +"</em>"+ restStr + '</li>';
}
}
//s生成列表并显示
result.innerHTML = oList;
result.style.display = 'block';
var liList = document.getElementsByTagName('li');
//鼠标移到li元素上加背景
for(var i=0;i<liList.length;i++){
liList[i].index = i;
liList[i].onmouseover = function(){
this.style.background = 'skyblue';
initial = this.index;
}
liList[i].onmouseout = function(){
this.style.background = 'none';
}
}
e.stopPropagation();
//键盘上移或下移
if(keyCode == 38){
initial--;
if(initial<0){
initial = 0;
}else{
liList[initial+1].className = '';
}
}else if(keyCode == 40){
initial++;
console.log(initial)
if(initial > liList.length-1){
initial = liList.length-1;
}else{
liList[initial-1].className = '';
console.log('ss')
}
}
liList[initial].className = 'focus';
//监听enter键
if(keyCode==13){
this.value = liList[initial].innerText;
result.style.display = 'none';
}
}
//只能keyup，不然第一次不到要匹配字符串！！！
search.onkeyup = searchResult;
</script>
</body>
</html>
发表于 2017-08-06 04:06:43
回复(0)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin:0;
}
.findComponent{
margin:30px auto;
width:200px;
position: relative;
}
ul li{
list-style-type: none;
border: 1px solid grey;
border-bottom: 0px;
cursor: default;
}
ul li:hover{
background: #eee;
}
ul li:last-child{
border-bottom: 1px solid grey;
}
.input{
width: 100%;
}
.findResult{
width:100%;
position: absolute;
transition:all 2s ease-in;
}
</style>
</head>
<body>
<div class='findComponent'>
<input class='input'>
<div class='findResult' style="display: none">
<ul>
</ul>
</div>
</div>
<script type="text/javascript">
var input=document.getElementsByClassName('input')[0];
var findResult=document.getElementsByClassName('findResult')[0];
var ul=document.getElementsByTagName('ul')[0];
var lis=document.getElementsByTagName('li');
var
resultArray=['333sxxdd','3qwesdfadf','3dghvcxv','44dsfdfg','35434ff','234sdfz'];
var inputText='';
input.onkeyup=function(e){
ul.innerHTML='';
inputText=input.value;
if(inputText.length==0)
return;
resultArray.map(function(item,i){
if (item.indexOf(inputText)==0) {
var li=document.createElement('li');
li.innerHTML='<strong>'+inputText+'</strong>'+item.substring(inputText.length);
ul.appendChild(li);
}
})
if (lis.length>0) {
findResult.style.display='block';
}
}
ul.onclick=function(e){
var selectedText=e.target.innerText;
input.value=selectedText;
findResult.style.display='none';
}
</script>
</body>
</html>
发表于 2017-05-20 21:06:36
回复(0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
<title>Examples</title>
<link href="" rel="stylesheet">
<style>
ul,
li,
form {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.input_warp {
border: 1px solid #d1d1d1;
width: 600px;
padding: 3px;
box-sizing: border-box;
position: relative;
}
.active {
border: 1px solid #2991E1;
}
.email_login {
border: none;
outline: none;
display: inline-block;
width: 100%;
}
.email_match {
width: 100%;
position: absolute;
top: 100%;
left: -1px;
border: 1px solid #d1d1d1;
border-top: none;
z-index: -1;
display: none;
}
.email_match li {
height: 30px;
line-height: 30px;
padding: 3px;
}
</style>
</head>
<body>
<p>1. 对input框中输入的字符进行匹配，将匹配到的内容以菜单的形式展现在 input框的下方； 2.
只针对英文字符进行匹配，并且匹配到的内容在菜单中加粗； 3. 通过键盘上的上下箭头可以对菜单进行选择，按下回车后将选中的内容写入到
input框中；</p>
<form action="#" class="form_login"
autocompete="off" onsubmit="return false;">
<div class="input_warp"
id="input_warp">
<input type="text"
class="email_login" id="email_login"
autocomplete="off">
<ul class="email_match"
id="email_match">
<li>"dads" <
<span>dads@ss.com</span>>
</li>
<li>"dsdfs" <
<span>dads@eth.com</span>>
</li>
<li>"asfjts" <
<span>dads@asfjts.com</span>>
</li>
<li>"dhyjs" <
<span>dads@ulf.com</span>>
</li>
<li>"dadddddgs" <
<span>dads@ds.com</span>>
</li>
<li>"ssrer" <
<span>dads@rg.com</span>>
</li>
</ul>
</div>
</form>
<script src="client.js"></script>
<script src="eventUtil.js"></script>
<script>
eventUtil.addHandler(window, "load", function() {
var doc = document;
var email_login = doc.getElementById('email_login');
var email_match = doc.getElementById('email_match');
var item_match = email_match.getElementsByTagName('li');
var input_warp = doc.getElementById('input_warp');
var len = item_match.length;
var tag = 0;
item_match[tag].style.background = "#f1f1f1";
eventUtil.addHandler(email_login, "focus",
function() {
input_warp.style.borderColor = '#E19B46'
email_match.style.display = "block";
});
eventUtil.addHandler(email_login, "blur",
function() {
input_warp.style.borderColor = '#d1d1d1';
});
eventUtil.addHandler(email_login, "keydown",
function(event) {
email_match.style.display = "block";
event = eventUtil.getEvent(event);
var code = event.keyCode;
if (code == 40) {
if (tag < len - 1) {
item_match[tag].style.backgroundColor =
"#fff";
tag++;
item_match[tag].style.backgroundColor =
"#f1f1f1";
} else {
tag = len - 1;
item_match[tag].style.backgroundColor =
"#f1f1f1";
}
} else if (code == 38) {
if (tag > 0) {
item_match[tag].style.backgroundColor =
"#fff";
tag--;
item_match[tag].style.backgroundColor =
"#f1f1f1";
} else {
tag = 0;
item_match[tag].style.backgroundColor =
"#f1f1f1";
}
} else if (code == 13) {
var text =
item_match[tag].getElementsByTagName('span')[0].innerText;
email_login.value = text;
email_match.style.display = "none";
}
});
for (var i = 0; i < len; i++) {
var that = item_match[i];
eventUtil.addHandler(that, 'click', function()
{//与失去焦点事件冲突
var text =
this.getElementsByTagName('span')[0].innerText;
email_login.value = text;
email_match.style.display = "none";
});
eventUtil.addHandler(that, 'mouseover', function(num)
{
eventUtil.removeHandler(email_login,'blur');
return function(){
tag=num;
this.style.backgroundColor =
"#f1f1f1";
}
}(i));
eventUtil.addHandler(that, 'mouseout', function() {
this.style.backgroundColor = "#fff";
});
};
})
</script>
</body>
</html>
发表于 2016-08-08 09:24:57
回复(0)
html5自身有一个不知道是否是你想要的,可以尝试一下:
<input type="text" list="data">
<datalist id="data">
<option value="111">
<option value="11">
<option value="1">
<option value="2"><option
value="22"><option value="222"><option
value="222">
<option value="3333"><option
value="3"><option value="3">
<option value="44">
</datalist>
发表于 2015-09-11 19:47:25
回复(0)
<pre class="prettyprint lang-html"><!DOCTYPE
html> <html lang="en">
<head> <meta charset="UTF-8">
<title>Document</title> <style
type="text/css"> #tipDialog p { margin: 0;
padding: 0; font-size: 12px; line-height: 12px; }
#tipDialog p.cur { background-color: gray; color: white; }
</style> </head> <body>
<div> <br> <br>
<br> <br>
aaaaaaaaaaaaaaaaaaaaaa<input type="text"
id="inputId"> </div> <!--
<div class='tip-dialog' id='tipDialog'> -->
</div> <script
type="text/javascript"> function
TipDialog(ele,dataList) { this._input = ele; this._length =
dataList.length; this._ele = ele; this._dataList = dataList;
this._fragment = null; this._initDlg(); this._init();
this._addEvent(); } TipDialog.prototype.getValue = function() {
var item = this._getCurItem(); var txt = item.childNodes[0];
return txt; } TipDialog.prototype.show = function() {
this.hide(); this._ele.appendChild(this._fragment);
console.log('show'); } TipDialog.prototype.hide = function() {
while(this._ele.firstChild) {
this._ele.removeChild(this._ele.firstChild); } }
TipDialog.prototype.setDataList = function(dataList) { this._dataList
= dataList; this._init(); } TipDialog.prototype._initDlg =
function() { // this._ele.style.setProperty('position', 'relative');
var div = document.createElement('DIV'); div.setAttribute('id',
'tipDialog'); div.style.setProperty('position', 'fixed');
div.style.setProperty('top', (this._input.offsetTop +
this._input.offsetHeight) + 'px'); div.style.setProperty('left',
(this._input.offsetLeft) + 'px') div.style.setProperty('width',
this._input.offsetWidth + 'px'); this._ele = div;
this._input.parentNode.appendChild(this._ele); } /*
根据数据列表，初始化dom fragment */ TipDialog.prototype._init = function() {
this._length = this._dataList.length; var dataList = this._dataList;
var i; var item; var fra = document.createDocumentFragment();
var p; var txt; console.log(dataList); for (i = 0; i <
this._length; i++) { p =
document.createElement('P');//--------------item = 0 进不来循环
console.log(i); txt = document.createTextNode(dataList[i]); if
(i === 0) { p.className = 'cur'; }
p.setAttribute('data-index', i + ''); p.appendChild(txt);
fra.appendChild(p); } this._fragment = fra;
//this._ele.appendChild(fra) }; TipDialog.prototype._getCurItem =
function() { var item = this._ele.querySelector('p.cur'); if
(item) { return item; } else { return null; } };
TipDialog.prototype._getItemByIndex = function(index) { // var items
= this._fragment; var items = this._ele.getElementsByTagName('p');
var i = 0; var item; for (i = 0; item = items[i]; i++) {
var dataIndex = parseInt(item.dataset.index); if (dataIndex ===
index) { return item; } } return null; };
TipDialog.prototype._changeFocus = function(type) { var curItem =
this._getCurItem(); var curIndex = parseInt(curItem.dataset.index);
console.log(curIndex); curItem.className = ""; var
newIndex = 0; if (type === 'up') { newIndex = (curIndex - 1)
< 0 ? (this._length -1) : (curIndex - 1) % this._length; }
else if (type === 'down') { newIndex = (curIndex + 1) %
this._length; console.log(newIndex); } var newItem =
this._getItemByIndex(newIndex); newItem.className = 'cur'; };
TipDialog.prototype._addEvent = function() { var self = this;
document.addEventListener('keydown', function(event) { var KEY_UP =
38; var KEY_DOWN = 40; // console.log(event.keyCode); if
(event.keyCode === KEY_UP) { self._changeFocus('up'); } else if
(event.keyCode === KEY_DOWN) { self._changeFocus('down'); }
else { return; } }, false);
this._input.addEventListener('blur',function(){ self.hide();
},false); this._input.addEventListener('input',function(){ var
value = parseInt(this.value);//this.getAttribute 和 this.value竟然不一样。
// console.log(value); var arr = []; for(var i = 0; i <
value;i++) { arr[i] = i; } //
console.log(arr);------------------todo获得候选列表 self.setDataList(arr);
self.show(); }); this._input.addEventListener('keydown',
function(event) { var KEY_ENTER = 13; var KEY_ESCAPE = 27;
switch (event.keyCode) { case KEY_ENTER:
//console.log(tipDialog.getValue()); this.value =
self.getValue().wholeText; self.hide(); break; case
KEY_ESCAPE: self.hide(); break; default: break;
} }, false); }; window.addEventListener('load',function(){
//var dlg = document.getElementById('tipDialog'); //var tipDialog
= new TipDialog(dlg,dataList); //tipDialog.show(); var input =
document.getElementById('inputId'); var tipDialog = new
TipDialog(input,[]); },false) </script>
</body> </html></pre> <br />
发表于 2015-08-15 10:52:27
回复(0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
ul,body,input{padding:0;margin:0;}
.ipt1{border:1px solid #ccc;width:200px;position:absolute;top:-999em;}
.ipt1 li{list-style:none;padding:3px;font-size:14px;font-family:"Microsoft yahei";}
.act_li{background:rgb(85,85,85);color:#fff;}
.nact_li{background:none;color:#000;}
</style>
<script>
window.onload=function()
{
var oIpt=document.getElementById('ipt1');
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var ie=!-[1,];
var arr=[];
var arr2=[];
var iNow=0;
function setInow()
{
if(arr.length)
{
for(var i=0;i<arr.length;i++)
{
aLi[arr[i]].className='nact_li';
};
aLi[arr[iNow]].className='act_li';
}
}
function getMail()
{
iNow=0;
arr=[];
var re=new RegExp("^"+this.value,"i");
for(var i=0;i<aLi.length;i++)
{
if(re.test(aLi[i].getAttribute("remail")))
{
arr.push(i)
aLi[i].style.display="block";
}
else
{
aLi[i].style.display="none";
}
}
var re3=new RegExp('(?="('+this.value+'))','i');
var str="";
if(arr.length)
{
for(var i=0;i<arr.length;i++)
{
var af=arr2[arr[i]].replace(re3,function($0,$1){str='<b>"'+$1+'</b>'});
str+=arr2[arr[i]].substring(this.value.length+1)
aLi[arr[i]].children[0].innerHTML=str;
}
}
setInow();
}
oIpt.onclick=function(ev)
{
var choose=ev||event;
oUl.style.position="static";
choose.cancelBubble=true;
}
document.onclick=function()
{
oUl.style.position="absolute";
}
for(var i=0;i<aLi.length;i++)
{
var t='<'+aLi[i].getAttribute("remail")+'>';
var oInnerText=document.createTextNode('inText');
oInnerText.nodeValue=t;
aLi[i].appendChild(oInnerText);
arr.push(i);
}
for(var i=0;i<aLi.length;i++)
{
aLi[i].index=i;
aLi[i].onclick=function(ev)
{
var choose=ev||event;
oIpt.value=this.getAttribute("remail");
choose.cancelBubble=true;
iNow=this.index;
setInow();
}
arr2.push(aLi[i].children[0].innerHTML);
}
if(ie)
{
oIpt.onpropertychange=getMail;
}
else
{
oIpt.oninput=getMail;
}
oIpt.onkeydown=function(ev)
{
var choose=ev||event;
if(choose.keyCode=='38')
{
if(iNow<=0){iNow=arr.length;};
iNow--;
}
if(choose.keyCode=='40')
{
if(iNow>arr.length-2){iNow=-1};
iNow++;
}
if(choose.keyCode==13)
{
this.value=aLi[arr[iNow]].getAttribute("remail");
}
setInow();
}
}
</script>
</head>
<body>
<input type="text" id="ipt1" class="ipt"/>
<ul id="ul1" class="ipt1">
<li remail="asah1@qq.com" class="act_li"><span>"asah1"</span></li>
<li remail="bsah2@qq.com"><span>"bsah2"</span></li>
<li remail="csah3@qq.com"><span>"csah3"</span></li>
<li remail="dsah4@qq.com"><span>"dsah4"</span></li>
<li remail="esah5@qq.com"><span>"esah5"</span></li>
<li remail="fsah6@qq.com"><span>"fsah6"</span></li>
<li remail="asah7@qq.com"><span>"asah7"</span></li>
<li remail="bsah8@qq.com"><span>"bsah8"</span></li>
<li remail="csah9@qq.com"><span>"csah9"</span></li>
<li remail="csah10@qq.com"><span>"csah10"</span></li>
<li remail="csah11@qq.com"><span>"csah11"</span></li>
</ul>
</body>
</html>
<html>
<head>
<meta charset="utf-8"/>
<style>
ul,body,input{padding:0;margin:0;}
.ipt1{border:1px solid #ccc;width:200px;position:absolute;top:-999em;}
.ipt1 li{list-style:none;padding:3px;font-size:14px;font-family:"Microsoft yahei";}
.act_li{background:rgb(85,85,85);color:#fff;}
.nact_li{background:none;color:#000;}
</style>
<script>
window.onload=function()
{
var oIpt=document.getElementById('ipt1');
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var ie=!-[1,];
var arr=[];
var arr2=[];
var iNow=0;
function setInow()
{
if(arr.length)
{
for(var i=0;i<arr.length;i++)
{
aLi[arr[i]].className='nact_li';
};
aLi[arr[iNow]].className='act_li';
}
}
function getMail()
{
iNow=0;
arr=[];
var re=new RegExp("^"+this.value,"i");
for(var i=0;i<aLi.length;i++)
{
if(re.test(aLi[i].getAttribute("remail")))
{
arr.push(i)
aLi[i].style.display="block";
}
else
{
aLi[i].style.display="none";
}
}
var re3=new RegExp('(?="('+this.value+'))','i');
var str="";
if(arr.length)
{
for(var i=0;i<arr.length;i++)
{
var af=arr2[arr[i]].replace(re3,function($0,$1){str='<b>"'+$1+'</b>'});
str+=arr2[arr[i]].substring(this.value.length+1)
aLi[arr[i]].children[0].innerHTML=str;
}
}
setInow();
}
oIpt.onclick=function(ev)
{
var choose=ev||event;
oUl.style.position="static";
choose.cancelBubble=true;
}
document.onclick=function()
{
oUl.style.position="absolute";
}
for(var i=0;i<aLi.length;i++)
{
var t='<'+aLi[i].getAttribute("remail")+'>';
var oInnerText=document.createTextNode('inText');
oInnerText.nodeValue=t;
aLi[i].appendChild(oInnerText);
arr.push(i);
}
for(var i=0;i<aLi.length;i++)
{
aLi[i].index=i;
aLi[i].onclick=function(ev)
{
var choose=ev||event;
oIpt.value=this.getAttribute("remail");
choose.cancelBubble=true;
iNow=this.index;
setInow();
}
arr2.push(aLi[i].children[0].innerHTML);
}
if(ie)
{
oIpt.onpropertychange=getMail;
}
else
{
oIpt.oninput=getMail;
}
oIpt.onkeydown=function(ev)
{
var choose=ev||event;
if(choose.keyCode=='38')
{
if(iNow<=0){iNow=arr.length;};
iNow--;
}
if(choose.keyCode=='40')
{
if(iNow>arr.length-2){iNow=-1};
iNow++;
}
if(choose.keyCode==13)
{
this.value=aLi[arr[iNow]].getAttribute("remail");
}
setInow();
}
}
</script>
</head>
<body>
<input type="text" id="ipt1" class="ipt"/>
<ul id="ul1" class="ipt1">
<li remail="asah1@qq.com" class="act_li"><span>"asah1"</span></li>
<li remail="bsah2@qq.com"><span>"bsah2"</span></li>
<li remail="csah3@qq.com"><span>"csah3"</span></li>
<li remail="dsah4@qq.com"><span>"dsah4"</span></li>
<li remail="esah5@qq.com"><span>"esah5"</span></li>
<li remail="fsah6@qq.com"><span>"fsah6"</span></li>
<li remail="asah7@qq.com"><span>"asah7"</span></li>
<li remail="bsah8@qq.com"><span>"bsah8"</span></li>
<li remail="csah9@qq.com"><span>"csah9"</span></li>
<li remail="csah10@qq.com"><span>"csah10"</span></li>
<li remail="csah11@qq.com"><span>"csah11"</span></li>
</ul>
</body>
</html>
发表于 2015-01-23 14:22:07
回复(0)
问题信息
-
扫描二维码，关注牛客网
- 意见反馈
-
下载牛客APP，随时随地刷题
扫一扫，把题目装进口袋
- 求职之前，先上牛客
-
扫描二维码，进入QQ群
扫描二维码，关注牛客公众号
- 公司地址：北京市朝阳区北苑路北美国际商务中心K2座一层-北京牛客科技有限公司
- 联系方式：010-60728802 投诉举报电话：010-57596212（朝阳人力社保局）
- 牛客科技© All rights reserved admin@nowcoder.com
- 京ICP备14055008号-4 增值电信业务经营许可证 营业执照 人力资源服务许可证
-
京公网安备
11010502036488号
