Flask + jquery自动完成 [英] Flask + jquery autocomplete

查看:280
本文介绍了Flask + jquery自动完成的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

还有一个关于烧瓶和jquery自动完成的问题。我一直在阅读和尝试以下回答问题没有任何成功:

Flask AJAX自动完成

在Flask中使用jQuery自动完成功能



特别是第二个答案完全符合我的情况。但是由于某些原因(也许我不知道该怎么做),回调 autocomplete(..) NAMES 中的值)时,c>只会执行一次,但在文本框中输入时不会执行。



search.html

 < head> 
< meta charset =utf-8>
< link rel =stylesheethref =// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css\">
< script type =text / javascriptsrc =http://code.jquery.com/jquery-latest.js>< / script>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js>< / script>
< / head>

{{form.autocomp.label}}:{{form.autocomp}}

< script>
$($ b $ .ajax({
url:'{{url_for(autocomplete)}}'
})。done(function(data)自动完成({
source:data,
minLength:2
});
});
} {
$('#autocomplete' );
< / script>

application.py

 来自瓶子的导入Flask,Response,render_template,request 
import json

app = Flask(__ name__)

从wtforms导入wtforms为wt
import TextField,Form

NAMES = [abc,abcd,abcde,abcdef]

class SearchForm(Form):
autocomp = TextField('autocomp',id ='autocomplete')

@ app.route('/ autocomplete',methods = ['GET'])
def autocomplete():
search = request.args.get('term')

app.logger.debug(搜索)
返回Response(json。 ()方法= ['GET','POST'])
def index() :
form = SearchForm(request.form)
返回render_template(search.html,form = form)

if __name__ =='__main__':
app.run(debug = True)


解决方案

这个

  from flask import jsonify 

NAMES = [abc,abcd,abcde ,abcdef]

@ app.route('/ autocomplete',methods = ['GET'])
def autocomplete():
search = request.args .get('term')

app.logger.debug(搜索)
返回jsonify(json_list = NAMES)


在jquery中:

 < script> 
$($ b $ .ajax({
url:'{{url_for(autocomplete)}}'
})。done(function(data)自动完成({
source:data.json_list,
minLength:2
});
}); $ b $('#autocomplete' b});
< / script>


Yet another question about flask and jquery autocomplete. I have been reading and trying the following answered questions without any success:

Flask AJAX Autocomplete

Using jQuery autocomplete with Flask

In particular the second answer is perfectly matching my case.

However for some reasons (maybe it's me not understanding what is supposed to do), the callback autocomplete(..) is executed only once when I load the page (and correctly autocomplete the value in NAMES) but never while typing in the textbox.

search.html

<head>
    <meta charset="utf-8">
    <link   rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
</head>

{{ form.autocomp.label }}: {{ form.autocomp }}

<script>
    $(function() {
        $.ajax({
            url: '{{ url_for("autocomplete") }}'
            }).done(function (data) {
                $('#autocomplete').autocomplete({
                    source: data,
                    minLength: 2
                });
            });
        });
</script>

application.py

from flask import Flask, Response, render_template, request
import json

app = Flask(__name__)

import wtforms as wt
from wtforms import TextField, Form

NAMES=["abc","abcd","abcde","abcdef"]

class SearchForm(Form):
    autocomp= TextField('autocomp',id='autocomplete')

@app.route('/autocomplete',methods=['GET'])
def autocomplete():
    search = request.args.get('term')

    app.logger.debug(search)
    return Response(json.dumps(NAMES), mimetype='application/json')

@app.route('/',methods=['GET','POST'])
def index():
    form = SearchForm(request.form)
    return render_template("search.html",form=form)

if __name__ == '__main__':
    app.run(debug=True)

解决方案

Try this

from flask import jsonify

NAMES=["abc","abcd","abcde","abcdef"]

@app.route('/autocomplete',methods=['GET'])
def autocomplete():
    search = request.args.get('term')

    app.logger.debug(search)
    return jsonify(json_list=NAMES) 

In Jquery:

<script>
$(function() {
    $.ajax({
        url: '{{ url_for("autocomplete") }}'
        }).done(function (data) {
            $('#autocomplete').autocomplete({
                source: data.json_list,
                minLength: 2
            });
        });
    });
</script>

这篇关于Flask + jquery自动完成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆