Аякс поиск с скрытием блоков
есть конструкция:
<input type="text" >
<div class="accordion">
<section class="accordion_item">
<div class="title_block">
заоловок
</div>
<div class="infos">
....
</div>
</section>
<section class="accordion_item">
<div class="title_block">
заоловок
</div>
<div class="infos">
....
</div>
</section>
<section class="accordion_item">
<div class="title_block">
заоловок
</div>
<div class="infos">
....
</div>
</section>
и т.д.
</div>
нужен срипт выполняющий проверку при печатании текста в input сравнивающий текст с заголовками title_block и input , там где нет совпадений скрывать весь section |
runyugin,
а где ваши попытки? |
runyugin,
а Аякс зачем? |
<script type="text/javascript">
jQuery(function ($) { $(document).ready(function(){ var $itemAcc = $('.accordion_item'); $('input').on('keyup', function(){ var indexHide = $itemAcc.filter(':contains("'+this.value+'")').ind ex(); $itemAcc.show(); if(indexHide > -1){ $itemAcc.eq(indexHide).hide(); } }); }); }); </script> |
фильтр по заголовкам
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
var $itemAcc = $(".accordion_item");
$("input").on("input", function() {
var val = this.value;
$itemAcc.show().filter(function() {
var text = $(".title_block", this).text();
return !~text.indexOf(val)
}).hide()
})
});
</script>
</head>
<body>
<input type="text" >
<div class="accordion">
<section class="accordion_item">
<div class="title_block">
заголовок 1
</div>
<div class="infos">
....
</div>
</section>
<section class="accordion_item">
<div class="title_block">
заголовок 2
</div>
<div class="infos">
....
</div>
</section>
<section class="accordion_item">
<div class="title_block">
заголовок 3
</div>
<div class="infos">
....
</div>
</section>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 21:37. |