我正在尝试将 url link 添加到自动完成数据

Question

我是编码新手，在某个特定部分苦苦挣扎。会很感激一些帮助。谢谢！

我正在尝试像这样添加 URL：

<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/349298285&color=%23f26016&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>

到 javascript 代码的以下部分。

// Auto Complete
const ac = document.querySelector('.autocomplete');
M.Autocomplete.init(ac, {
    data: {
      "Nik:11": null,
      "Tell Me": null, 
      "Hypervent": null,
      "Selfish Heart": null,
      "Dont Make Me wait": null,
      "What You Deserve": null,
      "You Did Something": null,
      "Quench My First": null,
      "Rockstar": null,
      "Dreamer": null,
      "Ultraviolet": null,
      "Win your Love": null,
    }
  });

实际上，我希望用户能够在搜索中使用自动完成功能，然后当他们点击它时，他们会转到 sound cloud 并播放那首歌。

有人知道我该怎么做吗？这里是搜索栏的代码？

code

你能解释一下我如何 link 将搜索栏向上搜索到曲目，并在网站上添加嵌入播放器吗？

提前感谢您的帮助。

Answer 1

您需要创建一个 MAP 或一个函数来获取每首歌曲在 soundcloud 上的 ID。然后，在初始化Autocomplete元素时，需要传递用户选择一个选项时执行的onAutoComplete函数

我在下面添加了一个示例（曲目 ID 是随机的），如您所见，changePlayerSong 选项将 url 与从地图中选择的歌曲 ID 设置到 iframe 元素（在这种情况下，我将 id ="player" 到 iframe）。

// Map of songs that relates the String of the autocomplete with the soundcloud id
const SONG_MAP = {
    "Nik:11": 349298284,
    "Tell Me": 349298283,
    Hypervent: 349298282,
    "Selfish Heart": 349298281,
    "Dont Make Me wait": 349298284,
    "What You Deserve": 349298284,
    "You Did Something": 349298284,
    "Quench My First": 349298284,
    Rockstar: 349298284,
    Dreamer: 349298284,
    Ultraviolet: 349298284,
    "Win your Love": 349298284
};

// Changes the iframe with id="player" url to display the new soundcloud song
function changePlayerSong(songId) {
  return `https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/${songId}&color=%23f26016&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true`;
};

// Configure the Autocomplete onload
document.addEventListener("DOMContentLoaded", function() {
  const ac = document.querySelector(".autocomplete");
  M.Autocomplete.init(ac, {
    data: {
      "Nik:11": null,
      "Tell Me": null,
      Hypervent: null,
      "Selfish Heart": null,
      "Dont Make Me wait": null,
      "What You Deserve": null,
      "You Did Something": null,
      "Quench My First": null,
      Rockstar: null,
      Dreamer: null,
      Ultraviolet: null,
      "Win your Love": null
    },
    // Autocomplete function callback that is triggered when the user selects some value
    onAutocomplete: function(value) {
      document.querySelector("#player").src = changePlayerSong(SONG_MAP[value]);
    }
  });
});

功能分解：

onAutocomplete: function(value) {
    document.querySelector("#player").src = changePlayerSong(SONG_MAP[value]);
}

此函数获取用户选择的自动完成结果，例如，如果用户在键入时选择 "Selfish Heart" 选项，则值将为 "Selfish Heart"。然后 SONG_MAP[value] 将 return 我们在开始时声明的 songId，例如 SONG_MAP["Selfish Heart"] 将 return 349298281。在这里，我们已经获取 songId 作为参数传递给播放器。为此，我们使用 changePlayerSong 函数。

function changePlayerSong(songId) {
  return `https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/${songId}&color=%23f26016&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true`;
};

如您所见，此函数接收一个名为 songId 的参数，该参数将包含我们之前从地图中检索到的歌曲编号。此函数将 return 歌曲的 SoundCloud URL，请注意 ${songId} 语法会将 ${songId} 替换为变量的内容，在本例中是作为参数接收的数字。

再次在我们的 onAutoComplete 函数上，我们已经有了带有播放器 URL 的 changePlayerSong 函数的结果。现在我们正在用以下指令替换显示播放器的 iframe 的源

document.querySelector("#player").src = changePlayerSong(SONG_MAP[value]);

这句话将在我们的 HTML 中查找具有 id="player" 的元素，并将 src（源）属性更改为新的 URL所选歌曲

如果您需要帮助或更多信息，请联系我！

我正在尝试将 url link 添加到自动完成数据

i am trying to add a url link to an autocomplete data

javascript

autocomplete

soundcloud