Динамический вывод элементов массива при изменении текстового поля

@ГеоргийТ · Регистрация: 06.08.2018

Author24 — интернет-сервис помощи студентам

можно ли средствами php сделать что то вроде ajax поиска? например я ввожу какой то символ в поле и выводится какой либо результат до тех пор пока вхождения подстроки из поля есть в массиве?? у меня есть код который работает после отправки пост запроса, но хотелось бы динамически подгружать!!!!

@sad67man · 11.01.2020, 01:39

ГеоргийТ, Если элементов не много, то можно сразу выгрузить все, потом средствами js фильтровать. Либо через аякс. вешаете событие on input с небольшой задержкой, где-то пол секунды. И делаете аякс запросы, подгружая отфильтрованные данные.

@ГеоргийТ · 11.01.2020, 01:48 **[ТС]**

САМЫЙ ГЛАВНЫЙ ВОПРОС, КАК???? ПОМОЖЕТЕ??

@sad67man · 11.01.2020, 02:19

ГеоргийТ, Так какой из вариантов нужно реализовать, сразу все грузим, либо через аяксы?

@ГеоргийТ · 11.01.2020, 02:22 **[ТС]**

через аякс, при именении инпут чтоб выводила

Добавлено через 20 секунд
буду премного благодарен

@sad67man · 11.01.2020, 03:33

ГеоргийТ,

Не по теме:

Если никто больше не напишет, то завтра накидаю вариант)

@sad67man · 11.01.2020, 15:24

ГеоргийТ, Покажите ваш код, что у вас сейчас есть. Чтоб знать от чего отталкиваться.

@ГеоргийТ · 11.01.2020, 16:49 **[ТС]**

HTML5
1
2
3
4
5
6
<form action="index.php" method="post">
                    <div class="block-search">
                        <input id="text" type="search" name="text" autocomplete="off" placeholder="Введите слово на русском" />
                        <input id="add" type="submit" name="add" value="Поиск" />
                    </div>
                </form>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
        // простой массив $words 
        require_once 'word-array.php';
        if(isset($_POST['add']))
        {
            $text = $_POST['text'];
            
            foreach ($words as $value)
            {
                if(!empty($text))
                {
                    if($value == strpos($value, $text)) echo "<p id='visible'>".$value."</p>";  
                }
            }
        }
            
        ?>

@fanatikus · 11.01.2020, 17:10

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
$(function(){
    $('#test').on('input', function(){
        let t = $(this).val();
        
        $.ajax({
            url: 'test_js.php',
            type: 'post',
            data: 'text=' + t,
            dataType: 'html',
            success: function(res){
                $('#result').html(res);
            }
        })
       
    })
})
</script>
 
<input type="text" id="test">
<div id="result"></div>

обработчик

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$config = array(
    'запись 1',
    'еще одна запись',
    'тестовая запись',
    'предпоследняя запись',
    'последняя запись'
);
 
$text = $_POST['text'];
 
$response = '';
 
foreach($config as $c){
    if(stripos($c, $text)){
        $response .= $c . '<br>';
    }
}
 
echo $response;

@sad67man · 11.01.2020, 17:26

Лучше еще добавить задержку и отменять предыдущие аякс запросы.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
  let timeout;
  let xhr;
  $('#test').on('input', function() {
    let t = $(this).val();
    clearTimeout(timeout);
    if (xhr) {
      xhr.abort();
    }
    timeout = setTimeout(function() {
      xhr = $.ajax({
        url: 'test_js.php',
        type: 'post',
        data: 'text=' + t,
        dataType: 'html',
        success: function(res) {
          $('#result').html(res);
        }
      })
    }, 500);
  })
})

@Verolomstvo · 11.01.2020, 17:36

sad67man, и если нет обновления страницы, то будет таймаут до скончания времён долбить test_js.php

@sad67man · 11.01.2020, 17:41

Verolomstvo, Это же не setInterval. Timeout срабатывает 1 раз.

@Verolomstvo · 11.01.2020, 17:44

Сообщение от sad67man

Timeout срабатывает 1 раз

гениально

а зачем ВЫ тогда clearTimeout используете?

@ГеоргийТ · 11.01.2020, 17:57 **[ТС]**

почему то, при вводе дублируется заголовок и поле((((

Добавлено через 4 минуты
он записывает весть html в тег((((

@sad67man · 11.01.2020, 18:04

Verolomstvo, Объясняю. У нас получается так, что на каждый набранный символ отправляется аякс запрос. Если буду очень быстро набирать (особенно если просто зажму клавишу), то полетит куча запросов, причем ответы от них могут приходить в другом порядке.
Поэтому ставим задержку, чтоб запрос не сразу улетал, а через пол секунды. Что происходит. Я набираю первый символ и в setTimeout присваивается функция, которая выполнится через 0,5 сек. Когда набираю второй символ, то если 0,5 сек еще не прошло, то предыдущий setTimeout отменяется и создается новый.
Так же мы отменяем предыдущий аякс запрос, если ответ еще не пришел, нам он уже не нужен, так как мы делаем уже другой аякс запрос. Иначе, он может только помешать, придти после последнего. Особенно если инет затупит.

@Verolomstvo · 11.01.2020, 18:14

sad67man, заблокировать множественные нажатия можно проще: объявили переменную, проверили, если переменная не равна false, то делаем нажатие и внутри условия обработки нажатия устанавливаем контрольную переменную в false

@sad67man · 11.01.2020, 18:20

ГеоргийТ,

Сообщение от ГеоргийТ

он записывает весть html в тег((((

Так и должно быть. В php формируйте только кусок html который необходимо заменить.

Добавлено через 5 минут

Сообщение от Verolomstvo

заблокировать множественные нажатия можно проще

А нам не нужно блокировать нажатие. Вы о чем. Я все выше описал. Мы делаем так, чтоб запрос уходил когда вы останавливаетесь набирать текст, т.е. после последнего "нажатия".

@ГеоргийТ · 11.01.2020, 18:24 **[ТС]**

пытаюсь вывести нужную часть, и так и сяк , но выводит либо дублированные лбо ничего!!! можете сделать?

@sad67man · 11.01.2020, 18:28

ГеоргийТ, Вы что-то не так делаете. Покажите код. У вас должен быть отдельный файл php и на него делать аякс запрос.

@ГеоргийТ · 11.01.2020, 18:35 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[PHP]
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Русско-Дигорский словарь Онлайн</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <div class="title-text">
            <h1>Русско-Дигорский словарь Онлайн</h1>    
        </div>
                        
            <?php
            require_once 'search.php';
            ?>
            
            
        <script src="jquery-3.3.1.min.js"></script>
        <script src="search.js"></script>
    </body>
</html>
[/PHP]

index.php

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
  let timeout;
  let xhr;
  $('#test').on('input', function() {
    let t = $(this).val();
    clearTimeout(timeout);
    if (xhr) {
      xhr.abort();
    }
    timeout = setTimeout(function() {
      xhr = $.ajax({
        url: 'index.php',
        type: 'post',
        data: 'text=' + t,
        dataType: 'html',
        success: function(res) {
          $('#result').html(res);
        }
      })
    }, 500);
  })
})

js файл

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
[HTML]
<input id="test" type="text" autocomplete="off" placeholder="Введите слово на русском" />
<div id="result" ></div>
<?php
    $config = array(
        'запись 1',
        'еще одна запись',
        'тестовая запись',
        'предпоследняя запись',
        'последняя запись'
    );
     
    $text = $_POST['text'];
     
    $response = '';
     
    foreach($config as $c){
        if(stripos($c, $text)){
            echo $c . '<br>';
        }
    }
?>
[/HTML]

search.php

Новые блоги и статьи Все статьи Все блоги /
Динамические массивы в C++ - создание и использование NullReferenced 27.04.2025 Динамические массивы представляют собой один из фундаментальных инструментов программирования на C++, позволяющий создавать структуры данных, размер которых определяется во время выполнения. . .	Асинхронный JavaScript: Промисы, Async/Await и Fetch API Reangularity 27.04.2025 Пользователь заходит на веб-страницу, нажимает кнопку и. . . ничего не происходит. Сайт словно замер. Через несколько секунд всё внезапно оживает, но пользователь уже успел закрыть вкладку. Знакомая. . .	Management on GitLab and repository management in Visual Studio code jigi33 27.04.2025 - repo management on GitLab - CI/ CD in GitLab - VCS repository management in Visual Studio code (see attachments)	Kanban или Scrum - что выбрать? EggHead 27.04.2025 Kanban и Scrum — уже много лет удерживают лидирующие позиции среди гибких подходов. Руководители проектов и команды разработчиков то и дело сталкиваются с дилеммой: какой из этих двух методов выбрать. . .	Кастомные Middleware на C# в ASP.NET Core UnmanagedCoder 27.04.2025 Разработка веб-приложений сегодня мало напоминает монолитное программирование прошлых лет. На смену громоздким блокам кода пришла модульная архитектура, где каждый компонент выполняет строго. . .
Анализ и линтинг кода JavaScript: ESLint, Prettier и JSHint run.dev 26.04.2025 JavaScript прошёл долгий путь от простого языка для анимации веб-страниц до основы современной веб-разработки. С ростом сложности приложений, увеличением кодовых баз и масштабированием команд. . .	Паттерны в Python: Singleton, Factory и Observer py-thonny 26.04.2025 Паттерны проектирования — это проверенные временем решения типовых проблем разработки программного обеспечения. Их история берёт начало с книги "Приёмы объектно-ориентированного проектирования. . . .	Исключения в C#: Stack Overflow, Access Violation и Out of memory stackOverflow 26.04.2025 Исключения в C# — это не только механизм оповещения о проблемах, а целое искусство управления потоком выполнения программы в экстремальных ситуациях. Обычное исключение, например,. . .	Логирование в C# ASP.NET Core с помощью Serilog, ElasticSearch, Kibana stackOverflow 25.04.2025 Помните те времена, когда для анализа проблемы приходилось подключаться к серверу, искать нужный лог-файл среди десятков других и вручную фильтровать тысячи строк в поисках ошибки? К счастью, эти дни. . .	Структура "железный OnKeyUp" вместо антидребезга. Полностью асинхронный счётчик. Hrethgir 25.04.2025 Программа для симуляции схемы - Logisim Evolution В общем какое-то время отвлёкся, так было надо, теперь когда запилю это на verilog и FPGA , досоставлю заявку в ФИПС на полезную модель - не готов. . .

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212

	Динамический вывод элементов массива при изменении текстового поля 11.01.2020, 01:27. Показов 2246. Ответов 28 Метки нет (Все метки) можно ли средствами php сделать что то вроде ajax поиска? например я ввожу какой то символ в поле и выводится какой либо результат до тех пор пока вхождения подстроки из поля есть в массиве?? у меня есть код который работает после отправки пост запроса, но хотелось бы динамически подгружать!!!! 0

@sad67man 2484 / 1408 / 667 Регистрация: 23.08.2015 Сообщений: 3,552
	11.01.2020, 01:39
	ГеоргийТ, Если элементов не много, то можно сразу выгрузить все, потом средствами js фильтровать. Либо через аякс. вешаете событие on input с небольшой задержкой, где-то пол секунды. И делаете аякс запросы, подгружая отфильтрованные данные. 0

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212
	11.01.2020, 01:48 [ТС]
	САМЫЙ ГЛАВНЫЙ ВОПРОС, КАК???? ПОМОЖЕТЕ?? 0

@sad67man 2484 / 1408 / 667 Регистрация: 23.08.2015 Сообщений: 3,552
	11.01.2020, 02:19
	ГеоргийТ, Так какой из вариантов нужно реализовать, сразу все грузим, либо через аяксы? 0

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212
	11.01.2020, 02:22 [ТС]
	через аякс, при именении инпут чтоб выводила Добавлено через 20 секунд буду премного благодарен 0

@sad67man 2484 / 1408 / 667 Регистрация: 23.08.2015 Сообщений: 3,552
	11.01.2020, 03:33
	ГеоргийТ, Не по теме: Если никто больше не напишет, то завтра накидаю вариант) 0

@sad67man 2484 / 1408 / 667 Регистрация: 23.08.2015 Сообщений: 3,552
	11.01.2020, 15:24
	ГеоргийТ, Покажите ваш код, что у вас сейчас есть. Чтоб знать от чего отталкиваться. 0

@Verolomstvo Заблокирован
	11.01.2020, 17:36
	sad67man, и если нет обновления страницы, то будет таймаут до скончания времён долбить test_js.php 0

@sad67man 2484 / 1408 / 667 Регистрация: 23.08.2015 Сообщений: 3,552
	11.01.2020, 17:41
	Verolomstvo, Это же не setInterval. Timeout срабатывает 1 раз. 0

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212
	11.01.2020, 17:57 [ТС]
	почему то, при вводе дублируется заголовок и поле(((( Добавлено через 4 минуты он записывает весть html в тег(((( 0

@sad67man 2484 / 1408 / 667 Регистрация: 23.08.2015 Сообщений: 3,552
	11.01.2020, 18:04
	Verolomstvo, Объясняю. У нас получается так, что на каждый набранный символ отправляется аякс запрос. Если буду очень быстро набирать (особенно если просто зажму клавишу), то полетит куча запросов, причем ответы от них могут приходить в другом порядке. Поэтому ставим задержку, чтоб запрос не сразу улетал, а через пол секунды. Что происходит. Я набираю первый символ и в setTimeout присваивается функция, которая выполнится через 0,5 сек. Когда набираю второй символ, то если 0,5 сек еще не прошло, то предыдущий setTimeout отменяется и создается новый. Так же мы отменяем предыдущий аякс запрос, если ответ еще не пришел, нам он уже не нужен, так как мы делаем уже другой аякс запрос. Иначе, он может только помешать, придти после последнего. Особенно если инет затупит. 0

@Verolomstvo Заблокирован
	11.01.2020, 18:14
	sad67man, заблокировать множественные нажатия можно проще: объявили переменную, проверили, если переменная не равна false, то делаем нажатие и внутри условия обработки нажатия устанавливаем контрольную переменную в false 0

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212
	11.01.2020, 18:24 [ТС]
	пытаюсь вывести нужную часть, и так и сяк , но выводит либо дублированные лбо ничего!!! можете сделать? 0

@sad67man 2484 / 1408 / 667 Регистрация: 23.08.2015 Сообщений: 3,552
	11.01.2020, 18:28
	ГеоргийТ, Вы что-то не так делаете. Покажите код. У вас должен быть отдельный файл php и на него делать аякс запрос. 0