基于jquery鼠标点击其它地方隐藏层并模拟select

基于jquery鼠标点击其它地方隐藏层并模拟select

by aisinvon

HTML

<input id="search" >
    <ul class="select">
      <li> <a href="#">baidu</a></li>
      <li> <a href="#">google</a></li>
      <li> <a href="http://baidu.com">bing</a></li>
    </ul>

CSS

.select{display: none;}

JavaScript

$(function() {
    $("#search").focus(function(even) {
        $("ul").show();
    })

    $("ul li").hover(function() {
        var liValue = $(this).find("a").text();
        $("input").attr("value", liValue);
    });

    document.onclick = function(e) {
        var e = e ? e : window.event;
        var tar = e.srcElement || e.target;
        if (tar.id != "search") {
            if ($(tar).attr("class") == "select") {
                $(".select").show();
            } else {
                $(".select").hide();
            }
        }
    }
});