javascript - 使用文本输入在 jQuery Galleria 中设置值

Question

我正在使用 Galleria ( http://galleria.io ) 和内置的 Flickr 插件创建图像集。我们应该添加用户交互性，但我对 javascript 还很陌生，所以我不确定该怎么做。

这是设置图库的代码:

<script>

Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');

var flickr = new Galleria.Flickr();
flickr.search('[SEARCH]', function(data) {
    Galleria.run('.galleria', {
        dataSource: data
    });
});
</script>

有没有办法从 <input type="text"> 中获取用户输入？并将 [SEARCH] 替换为用户的查询？

感谢您提供的任何帮助，因为我说过我对此很陌生。

Answer 1

你需要创建一个输入元素

<input type="text" id="searchbox" />

然后你需要像这样调用搜索函数:

var q = $('#searchbox').val();
var flickr = new Galleria.Flickr();
flickr.search(q, function(data) {
    Galleria.run('.galleria', {
        dataSource: data
    });
});

为此，您需要在页面中引用 jquery。否则使用它从输入元素中获取变量:

var q = document.getElementById("searchbox").value

编辑

正如您所说，您希望它在输入后执行，因此您需要向该 Input 元素添加一个事件监听器。

$('#searchbox').on('input', function() {
   var q = $('#searchbox').val();
   var flickr = new Galleria.Flickr();
   flickr.search(q, function(data) {
      Galleria.run('.galleria', {
          dataSource: data
      });
   });
}

现在每次更改文本框中的值时都会触发，按下提交按钮或 [ENTER] 时调用函数可能会更好

要使其使用 Enter 键工作，请使用以下代码:

jQuery(document).on('keydown', '#searchbox', function(ev) {
    if(ev.which === 13) {
        var q = $('#searchbox').val();
        var flickr = new Galleria.Flickr();
        flickr.search(q, function(data) {
           Galleria.run('.galleria', {
              dataSource: data
           });
        });
    }
});​