Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, открыл новый вопрос здесь https://qna.habr.com/q/1219744

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, а какой указать id и класс в двух тегах input c таким кодом? Спасибо!

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, поправьте пожалуйста, я не знаю как это сделать.

<form><br><br>
      		<div class="s-box">
      			<input type="text" id="input" autocomplete="off" class="s-input">
                <input type="text" id="box" autocomplete="off" class="s-box">
      			<input type="submit" class="s-btn" value="Найти">
                <ul class="dropdown" id="dropdown"></ul>
      		</div>
</form>

      	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
      $(document).ready(function(){
          
          function fetchData(){
            var s = $("#input").val();

            if (s == '') {
               $('#dropdown').css('display', 'none');
            }
            $.post("files/auto_complet.php", 
                  {
                    s:s
                  },
                  function(data, status){
                      if (data != "not found") {
                        $('#dropdown').css('display', 'block');
                        $('#dropdown').html(data);
                        
                        document.querySelectorAll('.s-box').forEach(box => {
                            box.querySelectorAll('.dropdown li').forEach(item => {
                            item.onclick = () => box.querySelector('.s-input').value = item.innerText;
                                });
                        });

                        

                      }
                  })
          }

          $('#input').on('input', fetchData);
          $("body").on('click', () => {
            $('#dropdown').css('display', 'none');
          });
          $('#input').on('click', fetchData);

      });
</script>

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, так как мне разобраться то, если я вообще не знаю синтаксис ни js ни jquery. Еще некоторые функции можно понять. Я понимаю, что классы можно писать в js таким образом class="input-1 s-input", но как быть в моем случае, я тут вообще чайник ((((

Я со временем разберусь в этом коде, с трудом, но разберусь.

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, но там же уже есть класс -> class="s-input"

<input type="text" id="input2" autocomplete="off" class="s-input">

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, Не подскажете немного подробнее? Я хочу быть понятливым, но у меня много вопросов тут же рождается голове. #dropdown и #input это id

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, это одно окно с id=input, а как с двумя окнами реализовать этот код, например с input и inut_2?

Пока на горячую или может завтра тогда?

<input type="text" id="input" autocomplete="off" class="s-input">

<input type="text" id="input2" autocomplete="off" class="s-input">

Триггер - живой поиск PHP, AJAX и API запрос?

Отметил. Спасибо!

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, Да сработало без него. Огромная Вам благодарность Владимир!

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, Я имею ввиду он также с done идет?

Вы не против телеграмм, если у меня по js появятся вопросы? Благодарю

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, Ура! жму руку!

Это правильный код Владимир?

<script>
      $(document).ready(function(){
          
          function fetchData(){
            var s = $("#input").val();

            if (s == '') {
               $('#dropdown').css('display', 'none');
            }
            $.post("files/auto_complet.php", 
                  {
                    s:s
                  },
                  function(data, status){
                      if (data != "not found") {
                        $('#dropdown').css('display', 'block');
                        $('#dropdown').html(data);
                        
                        document.querySelectorAll('#dropdown li').forEach(item => {
                            item.onclick = () => document.querySelector('#input').value = item.innerText;
                        });
                      }
                  }).done(() => {
                  	$('#dropdown li').forEach(item => {
                            item.onclick = () => $('#input').value = item.innerText;
                        });
                  });
          }


          
          $('#input').on('input', fetchData);
          $("body").on('click', () => {
            $('#dropdown').css('display', 'none');
          });
          $('#input').on('click', fetchData);

      });
</script>

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, Все, сработало!

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир,

Владимир, можно вас попросить в телеграм перейти?
Если бы мы решили проблему, я мог бы вам бонус какой заслать на карту

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, снова не получилось.

Новый код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
      $(document).ready(function(){
          
          function fetchData(){
            var s = $("#input").val();

            if (s == '') {
               $('#dropdown').css('display', 'none');
            }
            $.post("files/auto_complet.php", 
                  {
                    s:s
                  },
                  function(data, status){
                      if (data != "not found") {
                        $('#dropdown').css('display', 'block');
                        $('#dropdown').html(data);
                        $('#dropdown li').forEach(item => {
                            item.onclick = () => $('#input').value = item.innerText;
                        });
                      }
                  }).done(() => {
                  	$('#dropdown li').forEach(item => {
                            item.onclick = () => $('#input').value = item.innerText;
                        });
                  });
          }


          
          $('#input').on('input', fetchData);
          $("body").on('click', () => {
            $('#dropdown').css('display', 'none');
          });
          $('#input').on('click', fetchData);

      });
</script>

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, Нет, не срабатывает, что то не так ему



код в тексте:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
      $(document).ready(function(){
          
          function fetchData(){
            var s = $("#input").val();

            if (s == '') {
               $('#dropdown').css('display', 'none');
            }
            $.post("files/auto_complet.php", 
                  {
                    s:s
                  },
                  function(data, status){
                      if (data != "not found") {
                        $('#dropdown').css('display', 'block');
                        $('#dropdown').html(data);
                        $('#dropdown li').forEach(item => {
                            item.onclick = () => $('#input').value = item.innerText;
                        });
                      }
                  });
          }
          $('#input').on('input', fetchData);
          $("body").on('click', () => {
            $('#dropdown').css('display', 'none');
          });
          $('#input').on('click', fetchData);
      });
</script>

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, Не сработало, как жаль

Все равно не выбирает. Это новый код

<script>
      $(document).ready(function(){
          
          function fetchData(){
            var s = $("#input").val();

            if (s == '') {
               $('#dropdown').css('display', 'none');
            }
            $.post("files/auto_complet.php", 
                  {
                    s:s
                  },
                  function(data, status){
                      if (data != "not found") {
                        $('#dropdown').css('display', 'block');
                        $('#dropdown').html(data);
                      }
                  });
          }
          $('#input').on('input', fetchData);
          $("body").on('click', () => {
            $('#dropdown').css('display', 'none');
          });
          $('#input').on('click', fetchData);
          $('#dropdown li').forEach(item => {
            item.onclick = () => $('#input').value = item.innerText;
            });
      });
</script>

Когда нажимаю на Artem, окно просто закрывается и все. Но Artem не появляется. Вот что ему еще надо?

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, нужно присвоить id к li ?

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир,

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир,

Это в строке. Я набираю фразу em, появилось два совпадения, я хочу выбрать одно, например Artem, оно должно подсветиться при наведении мыши ( строка Artem), потом я должен сделать клик по этому слову и оно должно вставиться в окне input, где я набрал em. Все также, как в строке у поисковиков. Это jquery. Помогите пожалуйста Владимир. Заранее спасибо

Я реализовал все на стороне PHP, а с js и jquery у меня проблемы

строка ввода:

<input type="text" id="input" autocomplete="off" class="s-input">

Триггер - живой поиск PHP, AJAX и API запрос?

Владимир, вы не подскажете. У меня живой поиск и в выпадающем списке появляются результаты. Как теперь сделать так, чтобы при нажатии кнопки мыши на нужное слово, этот результат оказался в окне, где я вводил этот текст и остался там (это не ссылка). Спасибо!

Код

$(document).ready(function(){
          
          function fetchData(){
            var s = $("#input").val();

            if (s == '') {
               $('#dropdown').css('display', 'none');
            }
            $.post("files/auto_complet.php", 
                  {
                    s:s
                  },
                  function(data, status){
                      if (data != "not found") {
                        $('#dropdown').css('display', 'block');
                        $('#dropdown').html(data);
                      }
                  });
          }
          $('#input').on('input', fetchData);
          $("body").on('click', () => {
            $('#dropdown').css('display', 'none');
          });
          $('#input').on('click', fetchData);
      });