如何将 Wikipedia opensearch API 与 Typeahead.js 一起使用？

Question

谁能给我一个代码示例，说明如何将 Wikipedia 开放式搜索 API 与 Twitter Typeahead.js 一起使用？我知道我应该从 remote 选项中调用它，但我不知道如何检索这些值。

例如：

这是来自https://en.wikipedia.org/w/api.php?format=json&action=opensearch&lang=en&search=hello的json响应

[ "hello",
  [ "Hello",
    "Hello Kitty",
    "Hello My Name Is...",
    "\"Hello, World!\" program",
    "Hello Venus",
    "Hello Good Morning",
    "Hello! Project",
    "Hello Hurricane",
    "Hello Kitty (Avril Lavigne song)",
    "HelloWallet"
  ],
  [ "Hello is a salutation or greeting in the English language. It is first attested in writing from 1833.",
    "Hello Kitty (Japanese: ハロー・キティ, Hepburn: Harō Kiti), (full name: Kitty White (キティ・ホワイト, Kiti Howaito)) is a fictional character produced by the Japanese company Sanrio, created by Yuko Shimizu and currently designed by Yuko Yamaguchi.",
    "Hello My Name Is... is the debut studio album by American singer-songwriter Bridgit Mendler released on October 22, 2012, through Hollywood Records.",
    "A \"Hello, World!\" program is a computer program that outputs \"Hello, World!\" on a display device, often standard output.",
    "Hello Venus (Hangul: 헬로비너스; often stylized as HELLOVENUS) is a South Korean girl group formed by Tricell Media, a joint venture between Pledis Entertainment and Fantagio, in 2012. It was announced in July 2014 that the two companies had ended their partnership, with the remaining members continuing under Fantagio.",
    "\"Hello Good Morning\" is a song by American rapper and producer Diddy and his band Dirty Money, from their debut album, Last Train to Paris.",
    "Hello! Project (ハロー!プロジェクト, Harō! Purojekuto) is a Japanese idol project, the umbrella name for a collective of female singers who are under contract with the Up-Front Group and whose recordings are produced by Tsunku.",
    "Hello Hurricane is the seventh studio album by American alternative rock band Switchfoot. On February 13, 2011, the album won the award for Best Rock Gospel Album at the 53rd Grammy Awards.",
    "\"Hello Kitty\" is a song by Canadian singer-songwriter Avril Lavigne, taken from her self-titled fifth studio album, Avril Lavigne (2013).",
    "HelloWallet, wholly owned subsidiary of Morningstar, Inc., is a web and mobile application for employees, founded by former *ings Institution scholar Matt Fellowes."
  ],
  [ "https://en.wikipedia.org/wiki/Hello",
    "https://en.wikipedia.org/wiki/Hello_Kitty",
    "https://en.wikipedia.org/wiki/Hello_My_Name_Is...",
    "https://en.wikipedia.org/wiki/%22Hello,_World!%22_program",
    "https://en.wikipedia.org/wiki/Hello_Venus",
    "https://en.wikipedia.org/wiki/Hello_Good_Morning",
    "https://en.wikipedia.org/wiki/Hello!_Project",
    "https://en.wikipedia.org/wiki/Hello_Hurricane",
    "https://en.wikipedia.org/wiki/Hello_Kitty_(Avril_Lavigne_song)",
    "https://en.wikipedia.org/wiki/HelloWallet"
  ]
]

这是一个带遥控器的typeahead.js，这显然不起作用。

var wikiSuggestions = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'https://en.wikipedia.org/w/api.php?format=json&action=opensearch&lang=en&search=%QUERY',
    wildcard: '%QUERY'
  }
});

$('#remote .typeahead').typeahead(null, {
  name: 'wiki',
  display: 'value',
  source: wikiSuggestions
});

我怎样才能让它工作？我不知道如何检索建议页面的所有标题，以及带有文章标题的数组。

Answer 1

您可以使用 javascript 对其进行转换。

function openSearchConverter(osResults){
  console.log(osResults);
  var results = [];
  for(var i = 0; i < osResults[1].length;i++){
    results.push({
      name: osResults[1][i],
      desc: osResults[2][i],
      url: osResults[3][i],
    });
  }
  return results;
}

其他代码是filter: openSearchConverter in 的simular execpt：

var wikiSuggestions = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: 'https://en.wikipedia.org/w/api.php?format=json&action=opensearch&lang=en&search=%QUERY',
    wildcard: '%QUERY',
    filter: openSearchConverter
  }
});

您使用displayKey: 'name' 引用该对象：

$('#remote .typeahead').typeahead(null, {
  name: 'wiki',
  displayKey: 'name',
  source: wikiSuggestions
});