Введите поиск на странице (сложно объяснить в заголовке)

Я начинаю новый проект, и я уже понял большинство вещей или, по крайней мере, знаю, что нужно сделать, но мне любопытно кое-что, что я не думаю, что смогу понять самостоятельно (не так далеко). По сути, я пытаюсь создать строку ввода с двумя входами.

(т. е. «Что-то белое и синее».) А затем под строкой ввода будут отображаться только

или миниатюры с тегами «белый» и «синий».

Допустим, для всех миниатюр автоматически устанавливается значение «display:none;». до тех пор, пока не будут отображены результаты поиска и только миниатюры, соответствующие обоим входным данным.

Кто-нибудь может помочь?

Ну, вот один вариант:
https://jsfiddle.net/n0o3fwyo/1/

Однако это будет работать только с одним полем выбора и определенным идентификатором элемента списка (изображения/символы представляют собой список и должны быть помещены в один, а не в элементы div).

Если вы хотите сделать выборку на основе «тегов», например «блондинка, женщина» или чего-то подобного, нужно немного изменить весь код, может быть, что-то вроде этого:

https://jsfiddle.net/gnghzoLL/3/

Ну, немного сомнительно, судя по вашему описанию, но это будет относительно простой сценарий отображения/скрытия Javascript - или ajax-вызов, в зависимости от того, сколько миниатюр вам нужно начать.

Т.е. если их пара сотен, то с таким же успехом можно просто загрузить все при первой загрузке и показывать/скрывать их в зависимости от того, что выбрано.

Если их тысячи, возможно, вы захотите сделать это с помощью ajax-вызова и извлечь содержимое из базы данных.



При этом то, как это сделать, будет немного различаться в зависимости от того, с чем вам придется работать — я предполагаю, что у вас уже есть изображения с определенными тегами, и вы хотите показать те, у которых есть соответствующие теги? Если это так, вы можете либо составить список всех тегов в паре полей выбора и предложить людям выбирать доступные теги, либо вы можете использовать текстовый ввод в произвольной форме, но это может затруднить фактический поиск материала, поскольку люди могут не искать вещи, отмеченные тегами.



(Кто-то, кто ищет что-то синее и белое, может искать, например, что-то вроде «синий и слоновая кость» или что-то подобное — кроме того, вам придется проанализировать входную строку.

Следовательно, выбор, вероятно, будет работать лучше). Тогда это просто получение значения выбранного параметра и отображение всего, что соответствует этому тегу.

И так далее.

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

Итак, простые основы, будет ли это что-то похожее на это? Хотя в банкомате будет отображаться только одна вещь, поэтому мне нужно будет установить каждую переменную для отображения нескольких миниатюр и каждую опцию для отображения разных.

Но я собрал это очень быстро, основываясь на том, что вы сказали.

 


$(document).ready(function()


{


$("#showThumbs").change(function()


{


if($(this).val() == "Character 2")


{


$("#showThumbsValue").show();


}


else


{


$("#showThumbsValue").hide();


}


});


$("#showThumbsValue").hide();


});

Код (разметка): JS

  <label for="showThumbs">Enter Character name: </label> <select name="showThumbs" id="showThumbs"> <option value="Character 1">Character 1</option> <option value="Character 2">Character 2</option> <option value="Character 3">Character 3</option> <option value="Character 4">Character 4</option> <option value="Character 5">Character 5</option> <option value="Character 6">Character 6</option> </select> <div id="showThumbsValue"> <div style="width:50px;height:50px;background:#000;" id="showThumbsValue"></div> </div>

Код (разметка): Демо здесь: http://jsfiddle.net/jyp97e5r/

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

Я планирую использовать текстовый ввод, но также была идея использовать пару полей выбора.

Это будет довольно нишевая вещь, поэтому я не думаю, что мне придется беспокоиться, скажем, о том, что они ищут «слоновую кость» вместо «белого», потому что на самом деле это будут имена персонажей из игры, которой они будут.

поиск/ввод.