一 首先引用 js 插件
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

二 html
<div id="container">
<div class="first">
<input id="kw" onKeyup="getContent(this);" />
</div>
<div id="append"></div>
</div>

三 css

container {

position: absolute;
left: 40%;
top: 40%;

}
input {
border: 0;
width: 288px;
height: 30px;
font-size: 16px;
padding: 0 5px;
line-height: 30px;
}
.item {
padding: 3px 5px;
cursor: pointer;
}
.addbg {
background: #87A900;
}
.first {
border: solid #87A900 2px;
width: 300px;
}

append {

border: solid #87A900 2px;
border-top: 0;
display: none;

}

四 js
var data = [
"你好，我是Michael",
"你是谁",
"你最好啦",
"你最珍贵",
"你是我最好的朋友",
"你画我猜",
"你是笨蛋",
"你懂得",
"你为我着迷",
"你是我的眼"
];
(document).keydown(function(e) {
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if(keycode == 38) {
if(jQuery.trim(("#append").html()) == "") {
return;
}
(".item").hasClass("addbg")) {
moveNext();
} else {
("#kw").blur();
var index = $(".addbg").prevAll().length;
if(index == 0) {

(".item").length - 1).addClass('addbg');
} else {
(".addbg").prevAll().length;
if(index == (".item").removeClass('addbg').eq(0).addClass('addbg');
} else {
("#kw").blur();
var value = ("#kw").val(value);
$("#append").hide().html("");
}
});

function getContent(obj) {
var kw = jQuery.trim(("#append").hide().html("");
return false;
}
var html = "";
for(var i = 0; i < data.length; i++) {
if(data[i].indexOf(kw) >= 0) {
html = html + "<div class='item' onmouseenter='getFocus(this)' onClick='getCon(this);'>" + data[i] + "</div>"
}
}
if(html != "") {
("#append").hide().html("");
}
}

function getFocus(obj) {
(obj).addClass("addbg");
}

function getCon(obj) {
var value = ("#kw").val(value);
$("#append").hide().html("");
}
end 好啦 就是这样了