可以参考微信的js 分享sdk，调试的话，可以通过手机设置代理调试就好了~
html代码：<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
#container{
position:absolute
left:50%
top: 40%
}
#content{
float:left
position:relative
right:50%
}
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
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="first">
<input id="kw" onKeyup="getContent(this)" />
</div>
<div id="append"></div>
</div>
</div>
</body>
</html>
JavaScript代码：
var data = [
"你好，我是Michael",
"你是谁",
"你最好啦",
"你最珍贵",
"你是我最好的朋友",
"你画我猜",
"你是笨蛋",
"你懂得",
"你为我着迷",
"你是我的眼"
]
$(document).ready(function(){
$(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
}
movePrev()
}else if(keycode == 40){
if(jQuery.trim($("#append").html())==""){
return
}
$("#kw").blur()
if($(".item").hasClass("addbg")){
moveNext()
}else{
$(".item").removeClass?gl.guwen.top#ddbg').eq(0).addClass?gl.guwen.top#ddbg')
}
}else if(keycode == 13){
dojob()
}
})
var movePrev = function(){
$("#kw").blur()
var index = $(".addbg").prevAll().length
if(index == 0){
$(".item").removeClass?gl.guwen.top#ddbg').eq($(".item").length-1).addClass?gl.guwen.top#ddbg')
}else{
$(".item").removeClass?gl.guwen.top#ddbg').eq(index-1).addClass?gl.guwen.top#ddbg')
}
}
var moveNext = function(){
var index = $(".addbg").prevAll().length
if(index == $(".item").length-1){
$(".item").removeClass?gl.guwen.top#ddbg').eq(0).addClass?gl.guwen.top#ddbg')
}else{
$(".item").removeClass?gl.guwen.top#ddbg').eq(index+1).addClass?gl.guwen.top#ddbg')
}
}
var dojob = function(){
$("#kw").blur()
var value = $(".addbg").text()
$("#kw").val(value)
$("#append").hide().html("")
}
})
function getContent(obj){
var kw = jQuery.trim($(obj).val())
if(kw == ""){
$("#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").show().html(html)
}else{
$("#append").hide().html("")
}
}
function getFocus(obj){
$(".item").removeClass("addbg")
$(obj).addClass("addbg")
}
function getCon(obj){
var value = $(obj).text()
$("#kw").val(value)
$("#append").hide().html("")
}
