在Flask中使用jQuery自動完成

這個問題之前已經問過了，我想我已經完成了我在那裏看到的所有內容，但是我並不知道自己做錯了什麼。我對jQuery瞭解不多，但我會盡我所能解釋我正在嘗試做什麼。在Flask中使用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應該去自動完成功能和ge用一些JSON返回到自動完成。至少我認爲這是怎麼回事。我在這裏做錯了什麼？

來源

2013-06-28 miscsubbin

@morphyn是的。它被稱爲function_name。我甚至檢查了Flask生成的HTML，它是正確的。編輯：看來，評論已經消失。好吧。 – miscsubbin

嗨miscsubbin，我試圖實現此自動完成功能，但我無法這樣做。我也嘗試了您的方法，並嘗試了下面提供的解決方案。但我在request.args.get（'term'）中獲得價值時遇到問題。它對我來說總是空的。不知道發生了什麼。如果你能提供你的工作代碼片段，那將是非常好的。提前致謝。 – Pradeepb

更新：

autocomplete自動，如果你給它一個URL不能處理Ajax請求，您必須手動做到這一點：

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

您可能需要修改你處理的方式返回的數據取決於您的API返回的內容。

更新2：

在服務器端查詢的結果是這樣的：

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

您可以在發送之前壓平：

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

但你可能可能會改善您的查詢以直接返回字符串列表。如果您需要幫助，則需要發佈整個代碼。

來源

2013-06-28 13:45:12

自動完成功能實際上正常工作。如果我轉到127.0.0.1:5000/autocomplete?term=something，我將收到相應的JSON。我的表被稱爲別的東西，但爲了這個問題的目的，它並不是真的需要。另外，我使用「結果」的原因。append'和'results = []'，是我使用一個稍微複雜的查詢，涉及一個循環，但這不是我遇到的問題。 – miscsubbin

好的，我的下一個猜測是，您可能無法直接在'autocomplete'函數的'source'參數中輸入URL。您可能必須手動執行Ajax請求。我會更新我的答案舉一個例子。 –

因此，它實際上是從我的功能GET'ing。我已經改變了我的功能，只是在JSON中返回每個名字。我仍然沒有得到任何自動完成。有什麼方法可以讓我對Flask的響應進行格式化？我應該怎麼做呢？ – miscsubbin

實際上你甚至不需要一個請求來完成這個工作！使用標準的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>

來源

2018-01-06 23:31:54

在Flask中使用jQuery自動完成

回答

相關問題