jquery ajax 搜索建议

models.py

class Base():
    """
    基础类
    """

    def to_dict(self):
        """
        将实体对象转为json字典格式
        :return:
            {
                "attr": value
            }
        """
        return dict((col.name, getattr(self, col.name)) for col in class_mapper(self.__class__).mapped_table.c)


class User(db.Model, Base):
    id = db.Column(db.Integer, primary_key=True)
    uemail = db.Column(db.String(50))

views.py

@main.route('/demo')
def demo():
    return render_template('demo.html')


@main.route('/search')
def search():
    kw = request.args['kw']
    users = User.query.filter(User.uemail.like('%' + kw + '%')).all()
    return json.dumps(to_json_list(users))

common.py

def to_json_list(objs):
    """
    将多个实体对象转为json列表格式
    :return:
        [
            {
                "attr": value
            }
        ]
    """
    list = []
    for obj in objs:
        list.append(obj.to_dict())
    return list

html/demo.html

<div class="container">
    <p>
        电子邮件: <input type="text" id="kw">
    </p>
    <div class="content"></div>
</div>

css/demo.html

body{
    background: #999;
}

.container{
    position: relative;
}

.content{
    border: 1px solid #000;
    padding: 15px;
    background: #fff;
    width: 300px;
    position: absolute;
    top: 33px;
    left: 80px;
    display: none;
}

javascript/demo.html

<script src="/static/js/jquery-1.11.3.js"></script>
<script>
    $(function(){
        $("#kw").keyup(function(){
            if(this.value == ''){
                $(".content").html("");
                $(".content").css("display", "none");
            }else{
                var params = "kw=" + this.value;
                $.get('/search', params, function(res){
                    if(res.length > 0){
                        $(".content").css("display", "block");
                        var html = "";
                        for(var i in res){
                            html += "<p>" + res[i].uemail + "</p>";
                        }
                        $(".content").html(html);
                    }else{
                        $(".content").html("");
                        $(".content").css("display", "none");
                    }
                }, 'json');
            }
        });
    });
</script>