Фильтр поиска в реальном времени

Question

Фильтр поиска в реальном времени

Если у вас есть приложение для реагирования через AWS Static S3 Hosting & amp; CloudFront

Эта проблема представила CloudFront, ответив сообщением об отказе доступа 403, потому что он ожидал / some / other / path для существования в моей папке S3, но этот путь существует только внутри маршрутизации React с реактивным маршрутизатором ,

Решение состояло в том, чтобы настроить правило «Страницы ошибок распространения». Перейдите в настройки CloudFront и выберите свой дистрибутив. Затем перейдите на вкладку «Страницы ошибок». Нажмите «Создать пользовательский ответ об ошибке» и добавьте запись для 403, так как это код состояния ошибки, который мы получаем. Задайте путь страницы ответа в /index.html и код состояния до 200. Конечный результат удивляет меня своей простотой. Страница индексирования обслуживается, но URL-адрес сохраняется в браузере, поэтому, как только приложение реагирует на загрузку, он обнаруживает путь URL-адреса и переходит на нужный маршрут.

Страницы ошибок 403 Правило

0

javascript jquery html

задан CristiArde 16 January 2019 в 11:54

1 ответ

Другие вопросы по тегам:

javascript jquery html

Похожие вопросы:

score 0 · Answer 1

Попробуйте этот фильтр поиска jquery

$('[data-search]').on('keyup', function() {
	var searchVal = $(this).val();
	var filterItems = $('[data-filter-item]');

	if ( searchVal != '' ) {
		filterItems.addClass('hidden');
		$('[data-filter-item][data-filter-name*="' + searchVal.toLowerCase() + '"]').removeClass('hidden');
	} else {
		filterItems.removeClass('hidden');
	}
});

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
}

.search {
	margin-bottom: 30px;
}

.items {
	
}

[data-filter-item] {
	padding: 15px;
	background-color: #ccc;
	border: 1px solid #fff;
}

.hidden {
	display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div class="container">
	<div class="search">
		<input type="text" placeholder="search" data-search />
	</div>
	<div class="items">
		<div data-filter-item data-filter-name="apple">Apple</div>
		<div data-filter-item data-filter-name="google">Google</div>
		<div data-filter-item data-filter-name="microsoft">Microsoft</div>
		<div data-filter-item data-filter-name="hp">HP</div>
		<div data-filter-item data-filter-name="dell">Dell</div>
		<div data-filter-item data-filter-name="samsung">Samsung</div>
	</div>
</div>