如何将 Bloodhound 与使用烧瓶 jsonify 创建的 JSON 一起使用

Posted 2023-05-07

【中文标题】如何将 Bloodhound 与使用烧瓶 jsonify 创建的 JSON 一起使用

【英文标题】：How to use Bloodhound with a JSON created with flask jsonify

【发布时间】：2020-10-13 17:18:49

【问题描述】：

我正在尝试使用 Bloodhound 预输入功能来搜索我的烧瓶应用程序上的数据库。

我跟着这里： Twiiter Typeahead Custom Templates - Getting Default Example Working

$(document).ready(function()
 var playerList = [
"name": "Calvin Ridley",
"team": "ATL",
"id": 14
  , 
    "name": "Rob Gronkowski",
    "team": "TB",
    "id": 15
  ];

  var players = new Bloodhound(
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: $.map(playerList, function(d) 
      return 
        value: d.name,
        // pass `playerList` to `suggestion`
        suggest: d
      
    )
  );

  players.initialize();

  $("#custom-templates .typeahead").typeahead(null, 
    name: "best-pictures",
    display: "value",
    source: players.ttAdapter(),
    templates: 
      notFound: [
        "<div class=empty-message>",
        "Unable to find any players that match the current query",
        "</div>"
      ].join("\n"),
      suggestion: function(data) 
        // `data` : `suggest` property of object passed at `Bloodhound`
        return "<div><strong>" + data.suggest.name + "</strong>" 
               + ' (' + data.suggest.team + ')' + "</div>"
      
    
  );

); 

这很好用，但我想做的是使用由使用 jsonify 创建的 json 定义的 playerList。

@app.route('/players')
def playerdic():
    res=Player.query.all()
    list_players=[r.as_dict() for r in res]
    return jsonify(list_players)

这会创建一个我认为与我在本地创建的相同的 json。 Image of json found in /players

我认为我需要使用预取，但我不确定如何将其链接到“/players”，同时仍然允许我使用将 d.name 传递给值并将 d 传递给建议的函数。

【参考方案1】：

我在这里找到了答案.... Bloodhound / typeahead : using remote with simple strings

具体使用预取部分：

$(document).ready(function()
  var players = new Bloodhound(
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 
        url: "http://127.0.0.1:5000/players",
        filter: function(data)
            return $.map(data, function(item)
                return 
                 value: item.name + ' (' + item.team + ')',
                 suggest: item
                ;
            );
        
    
  );

虽然我不喜欢这样，但我需要将 URL 明确设置为“http://127.0.0.1:5000/players”。