使用Text Input在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">获取用户输入并将[搜索]替换为用户的查询？

感谢您提供的任何帮助，正如我所说，我对此很新。

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

Answer 2

<input type="text" id="search_field" /> [...]

<script>

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

var flickr = new Galleria.Flickr();
flickr.search($('#search_field').val();, function(data) {
Galleria.run('.galleria', {
    dataSource: data
    });
});
</script>

试试这个