Using Text Input to set value in jQuery Galleria

Question

I'm creating an image set using Galleria (http://galleria.io) and the built in Flickr plugin. We're supposed to add user interactivity, but I'm fairly new to javascript so I'm not exactly sure how to do it.

Here's the code that's setting up the gallery:

<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>

Is there a way to take user input from an <input type="text"> and replace the [SEARCH] with the user's query?

Thanks for any help you can provide, as I said I'm fairly new to this.

Answer 1

you will need to create a input element

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

and then you need to call the search function like this:

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

For this to work you need jquery referenced in your page. else use this to get the variable from an input element:

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

EDIT

as you said you want it to be executed after input, so you need to add an event listener to that Input element.

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

now this triggers every time you change the value in the textbox, you may be better off with a function call on pressing a submit button or [ENTER]

to make it work using the Enter key use the following code:

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>

try this