问题描述:
demo大概模样: 搜索框中输入关键字, 下方弹出提示, 点击提示词条, 去往相应的词条页面(这里用alert代替); 而搜索框失去焦点时, 会隐藏下方的提示内容
代码如下:
<body>
<div class="container">
<input type="text" id="input" placeholder="输入关键字" />
<ul class="test" id="test">
<li><a href="javascript:void(0)">西瓜</a></li>
<li><a href="javascript:void(0)">苹果</a></li>
<li><a href="javascript:void(0)">橙子</a></li>
<li><a href="javascript:void(0)">甘蔗</a></li>
<li><a href="javascript:void(0)">地瓜</a></li>
<li><a href="javascript:void(0)">土豆</a></li>
<li><a href="javascript:void(0)">山药</a></li>
<li><a href="javascript:void(0)">葛根</a></li>
</ul>
</div>
<script>
var test = document.getElementById('test');
var input = document.getElementById('input');
var links = document.getElementsByTagName('a');
input.onfocus = function () {
test.style.display = 'block';
}
input.onblur = function () {
test.style.display = 'none';
}
for