Использование автозаполнения jQuery с Flask

Question

Этот вопрос задан раньше, и я думаю, что я сделал то, что видел, но не знаю, что я делаю неправильно. Я не знаю много о jQuery, но я сделаю все возможное, чтобы объяснить, что я пытаюсь сделать.

Я хочу автозаполнения на основе запроса из базы данных, так что у меня есть это в моем шаблоне:

<script type="text/javascript"> 
    $(function() { 
     $("#function_name").autocomplete({ 
      source: '{{url_for("autocomplete")}}', 
      minLength: 2, 
     }); 
    }); 
</script> 

<form id="function_search_form" method="post" action=""> 
    {{form.function_name}} 
</form> 

форма генерируется с помощью этой формы Настой класса:

class SearchForm(Form): 
    function_name = TextField('function_name', validators = [Required()]) 

И здесь функция автозаполнения:

@app.route('/autocomplete') 
def autocomplete(): 
    results = [] 
    search = request.args.get('term') 
    results.append(db.session.query(Table.Name).filter(Table.Name.like('%' + search + '%')).all()) 
    return dumps(results) 

Так JQuery должен перейти к функции автозаполнения и ге t некоторые JSON вернутся к автозаполнению с. По крайней мере, я думаю, это то, что происходит. Что я здесь делаю неправильно?

Answer 1

Update:

autocomplete не обрабатывает запрос Ajax автоматически, если вы даете ему URL, вы должны сделать это вручную:

$(document).ready(function() { 
    $.ajax({ 
     url: '{{ url_for("autocomplete") }}' 
    }).done(function (data) { 
     $('#function_name').autocomplete({ 
      source: data, 
      minLength: 2 
     }); 
    }); 
} 

Вы, возможно, придется изменить так, как вы справиться возвращаемые данные, в зависимости от того, что возвращает ваш API.

Update 2:

Результат запроса на стороне сервера выглядит следующим образом:

[[["string1"], ["string2"], ... ["stringn"]]] 

Вы можете выровнять его перед отправкой:

import itertools 
flattened = list(itertools.chain.from_iterable(result[0])) 

Но вы вероятно, может улучшить ваш запрос, чтобы напрямую возвращать список строк. Вам нужно будет опубликовать весь код, если вам нужна помощь.

Answer 2

На самом деле вам даже не нужен запрос, чтобы сделать эту работу! Использование стандартного JQuery-UI автозаполнения, вы можете бросить свои возможные элементы в переменную дзиндзя, а затем:

<script type="text/javascript"> 
$('#search_form').autocomplete({ 
    source: JSON.parse('{{jinja_list_of_strings | tojson | safe}}'), 
    minLength: 2, 
    delay: 10, 
}); 
</script> 

Это очень удобно, если элементы привязаны к current_user, как и в Flask-Login.

<script type="text/javascript"> 
$('#search_form').autocomplete({ 
    source: JSON.parse('{{current_user.friends | map(attribute="name") | list | tojson | safe}}'), 
    minLength: 2, 
    delay: 10, 
}); 
</script>