使用SQLite和Flask搜索自動完成

我環顧四周，我似乎無法找到一個好的解決方案。我有一個簡單的SQLite數據庫，其中包含電子產品，並且我有一個搜索框，您可以在其中輸入產品的名稱進行搜索。但是我想使用自動完成功能，以便用戶能夠看到所有與他們輸入內容相關的產品。使用SQLite和Flask搜索自動完成

（即如果他們鍵入「EOS」，這將有一個小下拉菜單，顯示他們都與EOS字樣的產品，他們可以選擇他們想要的是哪一個）

我已經看到，Ajaxx具有自動完成功能，但是我無法找到關於如何將它正確地實現到我的應用程序的良好指示（我對編程還只是大概4個月）。

來源

2016-11-28 kstullich

快速谷歌把這個使用起來.... jQueryUI的https://jqueryui.com/autocomplete/ –

這https://www.devbridge.com/sourcery/components/jquery-autocomplete/ 做什麼你搜索，LOL。 –

@MisterPositive我也看到了這一點。但是對於這個例子來說，'var availableTags'是靜態的，並且用可用的名字進行了爆發。我不確定是否有辦法從我的數據庫中提取信息，因爲我的數據庫可以隨時更改。 – kstullich

jQueryUI將是最快捷的實現方法。這真是一個Javascript問題，但我會給你一些使用Flask來實現這個的技巧。

在您的視圖功能創建的產品列表基於數據庫，如：

def index(): 
    products = [row.product for row in Products.query.all()] 
    return render_template('index.html', products=products)

然後，你的HTML中/ JavaScript中使用下面的Jinja2語法&過濾器列表從Python的轉化爲東西JavaScript可以使用（從jQueryUI Docs）：

<script> 
$(function() { 
    var availableTags = {{ products|tojson|safe }}; 
    $("#tags").autocomplete({ 
     source: availableTags 
    }); 
}); 
</script>

顯然需要建立和包括適當的jQuery UI的源JavaScript文件中除了這個代碼，以及jQuery UI的CSS樣式。

來源

2016-11-28 18:34:21 abigperson

感謝您的回答。在閱讀jQuery UI時，它指出：「使用戶能夠快速查找並從鍵入的_pre-populated_列表中進行選擇，並利用搜索和過濾。」我真的不知道Javascript的任何內容，所以我不得不看看它，但我能夠從我的數據庫中讀取而不是靜態列表嗎？ – kstullich

這就是那種需要AJAX端點的東西，但答案肯定是。 – YellowShark

@YellowShark好的，謝謝。我將不得不閱讀關於Ajaxx和jQuery的更多信息。 – kstullich

使用SQLite和Flask搜索自動完成

回答

相關問題