JQuery Smart Search Show/Hide Content Elements
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MFA Father</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
/* 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
}
</style>
</head>
<body>
<div class="extend clear" id="searchbox_container">
<input type="text" name="searchnow" placeholder="Search here..." value="" class="extend clear display_block align_right" />
</div>
<div class="extend clear bgwhite extend center" id="mainwrapper">
<div class="extend clear" id="info_data_container">
<div class="infodata extend display_block align_left" data-name="Jason Acapela">
<img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Jason Acapela">
<h1>Jason Acapela</h1>
<p>Web Developer</p>
</div> <!-- end of .infodata -->
<div class="infodata extend display_block align_left" data-name="Derrick Tour">
<img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Derrick Tour">
<h1>Derrick Tour</h1>
<p>UI/UX</p>
</div> <!-- end of .infodata -->
<div class="infodata extend display_block align_left" data-name="Mechelle Hill">
<img src="img/user1.jpg" class="extend clear display_block center" alt="" width="125" height="125" title="Mechelle Hill">
<h1>Mechelle Hill</h1>
<p>System Developer</p>
</div> <!-- end of .infodata -->
</div> <!-- end of #info_data_container -->
</div> <!-- end of #mainwrapper -->
<script language="javascript" type="text/javascript">
$('.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();
}
});
});
});
</script>
</body>
</html>Я хочу, чтобы поиск JQuery с возможностью поиска определенного контента и показать результаты, а затем скрыть их снова.
This post фиксированный часть моей проблемы. Другое дело, что, когда сайт полностью загружен, необходимо отобразить только окно поиска, а данные поиска должны быть скрыты. Поэтому я попытался скрыть их с помощью стилей CSS и использовал display="none".
Вы можете видеть, что я делаю here.
Как видите, в верхнем правом углу находится только поле поиска. Когда вы вводите символ J, вы увидите результат поиска, но когда вы удалите символ J, вы увидите каждый элемент! Я не хочу этого. Я хочу, чтобы все остальные элементы все еще скрывались и отображались во время их поиска. Еще одна вещь, которую я нашел, - это то, что я хочу, чтобы поиск шел проверить входной символ с первым символом имен элементов. Я имею в виду, например, когда у нас есть четыре элемента со следующими именами: (Джеймс, Джейкоб, Джек, Джейсон), когда вы вводите J в поле поиска, они показывают все из них, но когда вы вводите Jac, он должен показывать вы два пункта, и когда вы ставите любого другого персонажа в одиночку, вам ничего не показывают!
Мне интересно иметь отдельную кнопку, где, когда я нажимаю на нее, появляются все элементы, и когда я нажимаю на нее снова, элементы исчезают.
Предложение http://www.redotheweb.com/2013/05/15/client-side-full- text-search-in-css.html Я нашел учебник на сайте ycombinator, он может помочь вам выполнить поиск по чистым css. Попробуйте, если хотите. – Vuong
Или ясный пример, чтобы понять это http://jets.js.org/ – Vuong