Question

有人能给我一个代码示例，告诉我如何在Twitter Typeahead.js上使用Wikipedia开放式搜索API？我知道我应该从远程选项中调用它，但我不知道如何检索这些值。

例如：

这是来自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 Brookings 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中类似的执行代码：

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
});

如何在Typeahead.js中使用Wikipedia opensearch API？

例如：

1 个答案: