利用PHP+JS实现搜索自动提示(实例)(2)

<style type="text/css">
.suggestionsBox {
    position: relative;
    left: 30px;
    margin: 10px 0px 0px 0px;
    width: 200px;
    background-color: #212427;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px solid #000;
    color: #fff;
}
.suggestionList {
    margin: 0px;
    padding: 0px;
}
.suggestionList li {
    margin: 0px 0px 3px 0px;
    padding: 3px;
    cursor: pointer;
}
.suggestionList li:hover {
    background-color: #659CD8;
}
</style>

CSS代码都很标准，没什么需要特别指出的。
主文件HTML ：
这是主文件的部分html代码，你需要添加的就是一个输入框，并且把 ‘onkeyup' 函数设置为lookup(this.value)。另外，我建议你不要修改它的ID，如果你不想修改上面的Javascript代码的话。
截图 ：
我想你应该会想要看看最后的效果是什么样子，OK。

还有，

最后就是有用的链接了，我想你应该期待很久了。
源文件 ：点击下载

您可能感兴趣的文章: