功能主頁UI

下拉搜尋選單

MongoDB支援模糊搜尋，所以我就比照FB做了一個下拉選單搜尋
點選欄位可以直接跳轉到該用戶頁面
下拉清單是自己用HTML+CSS寫的，主要概念是在Search Ajax後顯示

function searchUsers(){
    $.ajax({
        type: "POST",
        url: "http://127.0.0.1:3000/users/search",
        data: {search: $(".search").val()},
        success: function(data){
            $(".search").after("<ul class='searchBox'>");
            var datalist = '';
            for(var i=0; i<data.length; i++){
                datalist += ("<li class='searchItem' data-account='" + data[i].account + "'><div>" + data[i].username + "</div><div>" + data[i].account + "</div></li>");
                if(i==(data.length-1))
                    $(".searchBox").html(datalist);
                    $(".searchItem").mousedown(function(){
                        window.location.href = "http://127.0.0.1:3000/users/" + $(this).data("account")
                    });
            }
        },
        error: function(data){
            console.log(data);
        }
    });
};

SCSS

.searchBox{
    width: 93%;
    height: 200px;
    overflow: auto;
    z-index: 10;
    background: white;
    border: 1px solid;
    border-color: #888;
    position: absolute;
    list-style-type: none;
    padding: 0px;
    font-size: 15px;
    li {
        padding:5px 10px 5px 10px;
        width: 100%;
        height: 50px;
        &:hover{
            font-weight: bold;
            color: darken($button-color, 14%);
            background-color:lighten($nav-color, 15%);
        }
    }
}