Использование текстового ввода для установки значения в jQuery Galleria

Я создаю набор изображений с помощью 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"> и заменить [ПОИСК] запросом пользователя?

Спасибо за любую помощь, которую вы можете предоставить, как я уже сказал, я довольно новичок в этом.


javascript jquery user-input textinput galleria
person jondueck    schedule 10.12.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

вам нужно будет создать элемент ввода

<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

ИЗМЕНИТЬ

как вы сказали, вы хотите, чтобы он выполнялся после ввода, поэтому вам нужно добавить прослушиватель событий к этому элементу ввода.

$('#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
           });
        });
    }
});​
person Gotschi    schedule 10.12.2013
comment
Это работает, если у меня установлено значение по умолчанию для ввода, но как мне изменить это значение на основе ввода? - person jondueck; 10.12.2013
comment
Хорошо, у меня работают оба этих решения. Спасибо, что предоставили несколько вариантов и объяснили их. - person jondueck; 10.12.2013

arrow_upward
0
arrow_downward 

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

попробуй это

person Damien Locque    schedule 10.12.2013