要求：
1. 点击input框显示下拉列表。
2. 选中下拉列表值后关闭列表。
3. 方向键可选列表中的项。
<!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> <style type="text/css"> *{ margin:0; padding:0;} body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;} table{border-collapse:collapse;border-spacing:0;} li{list-style:none;} fieldset,img{border:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} q:before,q:after{content:'';} a:focus,input,textarea{outline-style:none;} input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;} textarea{resize:none} address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;} legend{color:#000;} abbr,acronym{border:0;font-variant:normal;} a{color:#333;text-decoration:none;} a:hover{text-decoration:underline;} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .clearfix{display:inline-block;} .clearfix{display:block;} .clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;} .none{display:none} .demo{ width:550px;margin:50px auto;} .input{width:543px; height:30px; line-height:30px; padding:3px 0 3px 5px; border:1px solid #ccc;background:#fff;} .demo .hover{ display:block;} .list{ border:1px solid #817f82;background:#fff; display:none;} .list li{width:548px; text-indent:1em;display:block; height:28px; line-height:28px;} .list li.cur{background:#ebebeb; text-decoration:none;} </style> </head> <body> <div class="demo"> <input class="input" type="text" name="" id="input" /> <ul id="list" class="list"> <li>豪情</li> <li>sina</li> <li>网易邮箱</li> <li>新浪微博</li> <li>腾讯微信</li> </ul> </div> </body> </html>运行代码