Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Живой фильтр на странице

Всем привет!

Подскажите пожалуйста по ситуации ниже, нужно понять как наиболее правильно реализовать данный кейс (искал в сети паттерны по этому вопросу - ничего толком не смог найти):
Допустим есть некий список параметров с чек-боксами:
Цвет:
Белый (checkbox)
Черный (checkbox)
Красный (check-box)

А также другой список параметров, которые также описывают свой свойства объекта:
Кузов:
Седан (checkbox)
Купе (checkbox)
Кабриолет (check-box)

А также есть div, в котором отображаются значения в зависимости от выбранного набора параметров: выбрали "белый" - отображаться объекты белого цвета (допустим автомобили), выбрали "белый" и "седан" - соответственно белые объекты седаны, сняли все чек-боксы - показали все имеющиеся объекты без учета цвета и формы кузова.

Результаты фильтрации должны отображаться пользователю "вживую" в реальном времени - нажал на элемент контроля - получил результат. Без перезагрузки страницы.

Тут я пока вижу 3 способа реализации:
1. При выборе или снятии любого чек-бокса, необходимо формировать массив и по ajax отправлять его в бэк-энд для того, чтобы модель через запросы к БД сформировала новые данные и вернула их в браузер. При это данные на странице обновляються целиком.
Минусы такого решения - нагрузка на БД (каждый клик по чек-боксу влечет новый запрос к БД) + передача большого количества информации, соответственно трафик и возможные лаги.
2. При первичной загрузке страницы выгрузить в браузер все объекты, а далее каким-то образом фильтровать на стороне клиента (выбрали признак - закрыли от пользователя все не подходящие объекты и т.д.). Правда пока не знаю как это сделать.
3. Реализовать промежуточный вариант - при выборе или снятии чек-бокса формировать массив и по ajax отправлять его в бэк-энд. Далее в бэке при помощи запросов к БД, модель вернет массив, содержащий в себе информацию -какие объекты в DOM-дереве должны быть видны, а какие должны быть закрыты. При помощи jquery реализуется обработка полученного массива.
4. Какой то другой вариант, который я пока не придумал.

У кого нибудь были подобные задачи?
Есть идеи- как наиболее рационально реализовать данную задачу?
Ответ: При JavaScript легче всего реализовать 2-й вариант. Цвет грузить не надо, он и так там есть. Кузов - ну загрузите 3 картинки, не так уж и много грузить. Потом когда все будет загружено клиенту при помощи кода и чекбоксов обновлять картинку.
Вопрос: AJAX живой поиск и запись в массив с обработкой

нашёл код живого поиск:

index.php

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html">
    <meta charset="utf-8">
	<title>Поиск</title>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/search.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

    <input type="text" name="referal" placeholder="Введите фамилию" value="" class="who"  autocomplete="off">
    <ul class="search_result"></ul>

</body>
</html>


style.css

Код:
.search{
    position:relative;
}

.search_result{
    background: #FFF;
    border: 1px #ccc solid;
    width: 350px;
    border-radius: 4px;
    max-height:100px;
    overflow-y:scroll;
    display:none;
}

.search_result li{
    list-style: none;
    padding: 5px 10px;
    margin: 0 0 0 -40px;
    color: #0896D3;
    border-bottom: 1px #ccc solid;
    cursor: pointer;
    transition:0.3s;
}

.search_result li:hover{
    background: #F9FF00;
}
search.php

<?php

define("DB_HOST","localhost");
define("DB_NAME","rtss"); //Имя базы
define("DB_USER","rtss"); //Пользователь
define("DB_PASSWORD","12345"); //Пароль

$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
$mysqli -> query("SET NAMES 'utf8'") or die ("Ошибка соединения с базой!");

if(!empty($_POST["referal"])){ //Принимаем данные

    $referal = trim(strip_tags(stripcslashes(htmlspecialchars($_POST["referal"]))));

    $db_referal = $mysqli -> query("SELECT * from passport WHERE surname LIKE '%$referal%'")
    or die('Ошибка №'.__LINE__.'<br>Обратитесь к администратору сайта пожалуйста, сообщив номер ошибки.');

    while ($row = $db_referal -> fetch_array()) {
        echo "\n<li>".$row["surname"].' '.$row["name"].' '.$row["middle_name"].' ('.$row["birth_year"].')';"</li>";
    }
}
?>


search.js

$(function(){
    
    //Живой поиск
    $('.who').bind("change keyup input click", function() {
        if(this.value.length >= 2){
            $.ajax({
                type: 'post',
                url: "search.php", //Путь к обработчику
                data: {'referal':this.value},
                response: 'text',
                success: function(data){
                    $(".search_result").html(data).fadeIn(); //Выводим полученые данные в списке
                }
            })
        }
    })
    
    $(".search_result").hover(function(){
        $(".who").blur(); //Убираем фокус с input
    })
    
    //При выборе результата поиска, прячем список и заносим выбранный результат в input
    $(".search_result").on("click", "li", function(){
        s_user = $(this).text();
        $(".who").val(s_user).attr('disabled', 'disabled'); //деактивируем input, если нужно
        $(".search_result").fadeOut();
    })

})



А теперь в чём суть вопроса\проблемы.
Этот живой поиск часть того, что нужно.
Есть таблица passport, содержащая паспортные данные человека.
Поиск проходит по фамилии, выводит ФИО+дату рождения.
Есть таблица участником мероприятия (похода) - hike_member. В таблицу нужно добавлять участников из таблицы passport по id_passport.
И сразу же для участника каждого нужно добавить его роль в походе (из таблицы справочника выпадающий списком запросов к базе - hike_post). Выводить такой выпадающий список я умею.

Я думал, что в поле осуществляется поиск живой участника. При выборе фамилии она заносится в поисковое поле и сама строчка блокируется. В скрытое поле заносится id_passport. И правее в выпадающем списке (кооторый появляется после выбора фамилии) выбирается роль (id_hike_post уже есть в самом выпадающем списке).

<?php
$query = "SELECT * FROM hike_post"; //заносим в переменную текст запроса
$result = $connection->query($query); //заносим в переменную результат запроса
if (!$result) die($connection->error) & mysqli_close() & exit(); //если ошибка, то выводим текст ошибки, закрываем соединение с базой и завершаем выполнение
$myrow = $result->fetch_array(MYSQLI_ASSOC); //извлекаем из переменной result первую строчку данных в виде массива
echo "<select name = 'hike_post'>";
do {
echo "<option value = '".$myrow['id_hike_post']."'>".$myrow['hike_post']."</option>"; //из переменной myrow извлекаем нужное поле d цикле и формируем значения выпадающего списка
} while ($myrow = $result->fetch_array(MYSQLI_ASSOC)); //цикл до тех пор, пока в переменной result есть строчки
echo "</select>";?>



После передать все значения (Кнопка Отправить) методом POST на обработчик, который занесёт эти данные (id_passport из скрытого поля и id_hike_post из выпадающего списка) в базу.

После отправки обработчик возвращает на страницу поиска (или поиск и обработчик на одной странице оставить..). И добавляется новый участник похода.

Скрин кусочка базы:



Помогите, пожалуйста, как это лучше реализовать. Может другой схемой как-то... Просто я в javascript не разбираюсь совсем...

Help, словом.

P.S. Сначала была идея с массивом. Но передумал. Мне бы хоть с этим разобраться...
Ответ: Совет не совсем по теме, но близко к тому. Если хотите реализовать качественный живой поиск, то не рекомендую полагаться на mysql и конструкции вроде

SELECT * from passport WHERE surname LIKE '%$referal%'


Рекомендую познакомиться и начинать как можно скорее использовать более подходящие инструменты вроде Sphinx или Apache Solr. Я лично нахожу Apache Solr более удобным. Ну и совет сразу же использовать его в cloud или кластерном режиме, а не режиме standalone. А поиск по мускулю с помощью LIKE - это от лукавого, пора уже серьезные вещи использовать. Ну и еще совет, вообще не рекомендую mysql использовать. К сожалению книжные полки в магазинах завалены книгами а-ля PHP + MySQl, Оптимизация MySQL и т.д. Говорю к сожалению, потому что на крупных проектах убедился, что хуже MySQL трудно представить другую базу данных. В конце концов, если использование реляционной базы принципиально, то пока база исходников не разрослась и количество селектов и прочих конструкций со всякими мускульными примочками не разрослось, лучше как можно скорее перейдите на PostgreSQL. Ну и не забывайте про кэширование. Нет смысла каждый раз делать LIKE 'блаблабла', если с момента последнего редактирования данных уже куча пользователей делали подобный запрос к базе. Для этого можете использовать например Redis, выбрав в качестве ключа наименование таблицы и закодированное поисковое слово. Удачи!
Вопрос: Html jquery работа с ссылками и страницами

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

например формируйте урл:

test.ru/page/1#panel-1

Javascript
1
location.hash // panel-1
Дальше парсите и включаете на странице то что вам нужно на основе данных переданных через адресную строку.
Вопрос: Автоматизация изменения исходного кода страницы

Здравствуйте киберфорумцы.
Хочу сайты(чужые) отптимизировать под себя.
Работаю в Хроме.
Задача в следующем: есть исходный код страницы (например страница )
В исходном коде я удалаю или изменяю некоторые строчки (например изменить контент на чтонибудь другое)
С:
<meta name="description" content="КиберФорум - форум начинающих и профессиональных программистов, системных администраторов, администраторов баз данных, компьютерный форум. Бесплатная помощь в решении задач по программированию и наукам, решение проблем с компьютером, операционными системами.">
На:
<meta name="description" content="КиберФорум - бла бла бла.">
После этих изминений мне нужно сделать так чтобы при обновлении страницы загружался именно мой исходный код, но всё остальное (разумееться кроме "description") было от сайта.
Мне нужно сделать какоето разширение которые бы изменяло исходный код.
Надеюсь вы поняли мой вопрос.
Жду ответов.
Удачного вам дня!
______
P.s.
Если тема не там, то извените, я недавно здесь сижу...
Ответ: iopakit, существуют разные подходы к решению твоей задачи, выбор здесь зависит от разных условий. В первую очередь - задача, насколько она сложна, поскольку под изменением может подразумеваться очень много вещей. Ну и, поскольку наиболее сложные модификации требуют программного вмешательства, то еще много зависит от того, какими инструментами, языками программирования и технологиями ты владеешь.
Наиболее простой способ что-то поменять - использование готовых расширений браузера. Там обычно достаточно удобный интерфейс, которым может воспользоваться практически любой пользователь. По хрому тут я вряд ли что-то посоветую, но например в фаерфоксе есть такое расширение как AddBlock. Помимо всего прочего оно позволяет ставить фильтры, с помощью которых можно скрывать отдельные блоки на отдельных страницах. Есть для него еще дополнение, позволяющее создавать фильтры в визуальном режиме.
Другой вариант - использование пользовательских скриптов. Опять-таки нужны для этого дополнения, поддерживающие скриптинг, но тут уже все немного сложнее, поскольку скрипт придется писать самому, это требует некоторых знаний. Примеры скриптов для киберфорума можно посмотреть .
Скрипты могут менять содержимое страницы, когда она уже пришла и загружается или даже загрузилась уже. Если надо, чтобы браузеру уже приходила измененная страница, можно использовать локальный прокси-сервер со своими скриптами, но это уже самый сложный из описанных вариантов, хотя, возможно найдешь удобный прокси-сервер.
Можно самому расширение для браузера написать, но это уже можно считать разновидностью второго варианта, только более сложной разновидностью, хотя и более функциональной.
Вопрос: Фильтр в каталоге: разные свойства для разных разделов

Здравствуйте.
Каталог реализован с помощью компонента bitrix:news.list. Фильтр в каталоге - с помощью компонента bitrix:catalog.filter.
Проблема в том, что набор свойств у товаров в разных разделах совершенно разный, и, как вы понимаете, на странице со стиральными машинами (например) выводить фильтр по типу "газовый"/"электрический" совершенно не нужно.
Может быть, есть готовые решения, позволяющие настраивать фильтр для разных разделов каталога? Или где-нибудь доступно описан способ, которым можно допилить catalog.filter?
Спасибо.
Ответ: Ну вдруг кто-то знает способ) Я находила статью с решением данной проблемы для этого фильтра и каталога на компоненте catalog.
Вопрос: Страницы не индексируются в Гугле

Вот есть сайт

Возраст -июль 2015
Через Яндекс индексмруются все страницы, а через Гугл только главная.
Какова причина?
В инструменте веб-мастеров, в разделе "меры, принятые вручную", сообщений о внесении по фильтр НЕТ.
Сайт попал под фильтр Гугла?
Или дело в другом?
ДОПОЛНЕНИЕ
Был добавлен файл sitemap.xml, ситуация исправилась, но недалого.
Теперь в индексе гугла только 5 страниц по количеству разделов.
В яндексе все нормально.
В чем причина таки нестыковок?
Может из-за дублей и неуникальных текстов?
Ответ:
Цитата:
о возможностях пинга

Зачем они нужны, если можно напрямую передать адрес страницы в Гугл? Это лишнее.
Вопрос: Фильтр для таблицы

Все привет помогите решет задачу. Есть интерактивная таблица autocekp.beget.tech/newamo/ в нужно сделать подсчет сталбца AGE при изменение значение AGE также при изменение фильтра. У меня получилось сделать только чтобы менялось при изменение старки AGE
PHPHTML
1
2
3
4
5
6
7
8
9
$(".editablegrid-age").change(function () {
var testt = grid.data;
       var i = grid.data.length;
       var sum = 0;
       for (g=0; g<i; g++ ){
         sum = sum + parseInt(testt[g].columns[3]);
       };
        document.getElementById('prices').innerHTML = sum;
    });
Но когда переключать фильтр цена не меняется. код фильтра
PHPHTML
1
2
3
4
5
6
7
8
9
10
    $("#first_fill input").on("click", function(){
    if($(this).is(':checked')){
    datagrid.editableGrid.filter( $(this).val() , [5]);
    
    
    }else{
    
    datagrid.editableGrid.filter( "");
    }
});
Как быть?
Ответ:
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
document.addEventListener('change', function(event) {
                  var testt = grid.data;
  
       var i = grid.data.length;
       var sum = 0;
       for (g=0; g<i; g++ ){
           if(testt[g].columns[12] == null){
              testt[g].columns[12] =0; 
           }
         sum = sum + parseInt(testt[g].columns[12]);
       };
        document.getElementById('prices').innerHTML = sum;
            //checkbox
             if(event.target.checked){
    event.target.setAttribute('checked', 'checked');
   datagrid.editableGrid.filter(event.target.defaultValue, [5]);
       
    }else{
    
    datagrid.editableGrid.filter( "");
    };
    //checkbox
$("#filter").keyup(function() {
                    datagrid.editableGrid.filter( $(this).val(), [0,1,2,3,4,5,6,7,8,9,10,11,14,15]);
var i = grid.data.length;
       var sum = 0;
       for (g=0; g<i; g++ ){
           if(testt[g].columns[12] == null){
              testt[g].columns[12] =0; 
           }
         sum = sum + parseInt(testt[g].columns[12]);
       };
      
        document.getElementById('prices').innerHTML = sum;
                    // To filter on some columns, you can set an array of column index 
                    //
                  });           
var testt = grid.data;
       var i = grid.data.length;
       var sum = 0;
       for (g=0; g<i; g++ ){
           if(testt[g].columns[12] == null){
              testt[g].columns[12] =0; 
           }
         sum = sum + parseInt(testt[g].columns[12]);
       };
      
        document.getElementById('prices').innerHTML = sum;
        
    });
Добавлено через 4 минуты
Возникла другая проблема при клики на checkbox все подсчитывает. но стоит перегрузить страница как sum счетает все а фильтр показивает другое
Вопрос: Ищу фильтр поиска DLE

Нужна помощь (ткнуть носом) в реализации фильтров поиска по дополнительным полям в DLE 10.2 на AJAX.
Т.е., юзер "галочками" отмечает чек-боксы, а страница "обновляется" средствами Ajax с результатами поиска.
Если кто-то реализовывал уже - подкиньте реализацию.
Заранее, спасибо!
Ответ: Фильтров в пабле нет и не было, да и сомневаюсь что появятся бесплатные. 1 раз видел псевдо фильтр работающий на половину. Все пишут под себя. Это тонкая черта и так просто писать и обновлять за спасибо ни кто не будет.
Вопрос: Если пользователь проскроллил до конца страницы

Всем привет, имеется такой код:

$(window).scroll(function(){ 
	if($(window).scrollTop()+$(window).height()>=$(document).height())
	{ 
		console.log('ура! конец страницы!') 
	} 
});


По логике он должен определять, когда пользователь проскроллил до конца страницы, но почему-то консоль выдает текст, когда я даже немного проскроллил вниз, не достигнув конца страницы.
Ответ: KiberQ,
мне нечего добавить, код содержит вставки, без живого макета можно только гадать ... смотрите совет выше, может чем поможет.
Вопрос: Правка в коде (Фильтр)

Здравствуйте, подскажите пожалуйста, что нужно изменить в этом коде чтобы в фильтре выбора, автоматически была выбрана при загрузки страницы 3 строчка. По стандарту выбрана - Everything - .
CMS Wordpress plagin BuddyPress


Код:
<div class="item-list-tabs no-ajax" id="subnav" role="navigation">
      <ul>
         <li class="feed"><a href="<?php bp_sitewide_activity_feed_link(); ?>" title="<?php esc_attr_e( 'RSS Feed', 'buddypress' ); ?>"><?php _e( 'RSS', 'buddypress' ); ?></a></li>

         <?php do_action( 'bp_activity_syndication_options' ); ?>

         <li id="activity-filter-select" class="last">
            <label for="activity-filter-by"><?php _e( 'Show:', 'buddypress' ); ?></label>
            <select id="activity-filter-by">
               <option value="-1"><?php _e( '&mdash; Everything &mdash;', 'buddypress' ); ?></option>

               <?php bp_activity_show_filters(); ?>

               <?php do_action( 'bp_activity_filter_options' ); ?>

            </select>
         </li>
      </ul>
   </div><!-- .item-list-tabs -->
Ответ: Поможите мне сделать это за плату? У меня не получается.
Мне нужно чтобы при открытие Activity, не все функции были открыты на странице. а выводились только с блока Статусы - Updates. Вроде как сделать это не сложно но нужны знания в php хорошие, и у меня не получается, из за нехваткой знаний. Сколько будит стоить чтобы вы сделали что я хочу?