JQuery Smart Search Показать/Скрыть элементы контента ⇐ Html

[Anonymous]

Код: Выделить всё

MFA Father


/* This CSS is just for presentational purposes. */
.extend{max-width: 100%; max-height: 100%;}
.clear{clear: both; float: none;}
.bgwhite{background: #ffffff;}
.center{margin-left: auto; margin-right: auto;}
.display_block{display: block;}
.display_none{display: none}
.align_left{float: left;}
.align_right{float: right;}

#searchbox_container input[type="text"]{
bacground: #ffffff;
border: 1px solid #cccccc;
padding: 8px;
color: #555555;
}
#searchbox_container input[type="text"]:focus{
outline: none;
}
.infodata{
margin: 5px;
}
.infodata h1{
font-size: 15px;
padding: 0px;
margin: 0px 0px 3px 0px;
text-align: center;
text-transform: uppercase;
}
.infodata p{
font-size: 10px;
padding: 0px;
margin: 0px;
text-align: center;
text-transform: uppercase;
}
.infodata img{
width: 125px;
height: 125px;
margin-bottom: 5px
}








[img]img/user1.jpg[/img]
Jason Acapela
Web Developer


[img]img/user1.jpg[/img]
Derrick Tour
UI/UX


[img]img/user1.jpg[/img]
Mechelle Hill
System Developer

 
 

$('.infodata').hide();
$(document).ready(function(){
$('[name="searchnow"]').on('input', function(){
var that = $(this);
$('.infodata').hide();
$('.infodata').each(function(){
if($(this).attr('data-name').toUpperCase().indexOf(that.val().trim().toUpperCase()) > -1){
$(this).show();
}
});
});
});

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

Этот пост исправил часть моей проблемы. Другое дело, что при полной загрузке сайта должно появиться только окно поиска, а данные поиска должны быть скрыты. Поэтому я попытался скрыть их с помощью стилей CSS и использовал display="none".

Вы можете увидеть, что я делаю здесь.

Итак, как вы видите, в правом верхнем углу страницы есть только окно поиска. Когда вы вводите символ J, вы увидите результат поиска, но когда вы удаляете символ J, вы увидите каждый элемент! Я этого не хочу.
Я хочу, чтобы все остальные элементы по-прежнему скрывались и появлялись, пока мы их ищем.
Еще одна вещь, которую я обнаружил, это то, что я хочу, чтобы поиск проверял входной символ с первым символом имени элемента. Я имею в виду, что, например, когда у нас есть четыре элемента со следующими именами: (Джеймс, Джейкоб, Джек, Джейсон), когда вы вводите J в поле поиска, оно показывает их все, но когда вы вводите Джека, оно должно показать вам два элемента, а когда вы помещаете любой другой персонаж отдельно, вам ничего не отображается!

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

Подробнее здесь: https://stackoverflow.com/questions/385 ... t-elements