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

Question

[Евгений Павлов]

Подскажите пожалуйста, где и как установить триггер? Чтобы после живого поиска на PHP, AJAX к базе данных, когда ничего не найдено в БД, включался поисковый запрос к API Jacascript. Как и где реализовать автоматическое переключение? Спасибо за совет!

Answer 1

[historydev]

P.S.: А в чём собственно проблема? Вызовите новый ajax с url на другой сервер, или что вы называете "JS API"?

if(!res.body || res.body && !res.body.length) {
// "API JavaScript"
}

Comments

[Евгений Павлов]

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

Код

$(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);
      });

[historydev]

Евгений Павлов, а где это нужное слово? Как понять нужное слово? В каком окне?

[Евгений Павлов]

Владимир,

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

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

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

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

[historydev]

Евгений Павлов, укажите мне путь к этому блоку с его классом допустим:

$('#dropdown .item') /* Artem */

[Евгений Павлов]

Владимир,

[Евгений Павлов]

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

[historydev]

$('#dropdown li').forEach(item => {
item.onclick = () => $('#input').value = item.innerText;
});

[Евгений Павлов]

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

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

<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 не появляется. Вот что ему еще надо?

[historydev]

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;
            });
                      }
                  });
          }

[Евгений Павлов]

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



код в тексте:

<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>

[historydev]

Евгений Павлов, $.post("files/auto_complet.php", это асинхронщина? .then вызвать можно?

[historydev]

Евгений Павлов,

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;
                        });
                  });
          }

[historydev]

Евгений Павлов, я не использовал ajax, в доках написано что после вызывается .done, вам нужно вызвать этот блок, когда уже все данные будут выведены в li:

$('#dropdown li').forEach(item => {
                            item.onclick = () => $('#input').value = item.innerText;
                        });

[Евгений Павлов]

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

Новый код:

<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>

[historydev]

Убедитесь что мы имеем доступ к списку li

$('#dropdown li').forEach(item => {
console.log(item)
console.log(item.textContent)
                            item.onclick = () => $('#input').value = item.innerText;
                        });

[Евгений Павлов]

Владимир,

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

[historydev]

Евгений Павлов,

document.querySelectorAll('#dropdown li').forEach(item => {
                            item.onclick = () => document.querySelector('#input').value = item.innerText;
                        });

[Евгений Павлов]

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

[Евгений Павлов]

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

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

<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>

[Евгений Павлов]

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

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

[historydev]

Евгений Павлов,
Если работает, это убрать можно

.done(() => {
                  	$('#dropdown li').forEach(item => {
                            item.onclick = () => $('#input').value = item.innerText;
                        });
                  });

[historydev]

Евгений Павлов, будут вопросы, задавайте их здесь, достаточно людей которые могут помочь

[Евгений Павлов]

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

[historydev]

Евгений Павлов, отметьте решением ;) Обращайтесь

[Евгений Павлов]

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

[Евгений Павлов]

Владимир, это одно окно с 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">

[historydev]

Евгений Павлов, замените все id на классы:

document.querySelectorAll('.s-box').forEach(box => {
	 box.querySelectorAll('.dropdown li').forEach(item => {
     item.onclick = () => box.querySelector('.input').value = item.innerText;
   });
});

[Евгений Павлов]

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

[historydev]

Евгений Павлов, да, заменить в html id на класс

[Евгений Павлов]

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

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

[historydev]

Евгений Павлов, так используйте его, но id не дублируйте

[Евгений Павлов]

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

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

[historydev]

Евгений Павлов,
Да что тут разбираться, замените говорю классы в скрипте, на ваши или наоборот:

document.querySelectorAll('.s-box').forEach(box => {
   box.querySelectorAll('.dropdown li').forEach(item => {
     item.onclick = () => box.querySelector('.s-input').value = item.innerText;
   });
});

[Евгений Павлов]

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

<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>

[historydev]

Евгений Павлов, создайте новый вопрос

[historydev]

Евгений Павлов,
Попробуйте так:

function box_listener(box){
  const input = box.querySelector('input');
  const dropdown = box.querySelector('#dropdown');

  if (input.value === '') dropdown.style.display = 'none';
  
  const fetch_data = _ => {
  	$.post("files/auto_complet.php", { s: input.value }, (data, status) => {
      if (data != "not found") {
        dropdown.style.display = 'block';
        dropdown.innerHTML = data;
        box.querySelectorAll('.dropdown li').forEach(item => {
          item.onclick = () => e.target.value = item.innerText;
        });
      }
  	});
  }
  
  input.oninput = fetch_data;
  input.onclick = fetch_data;
  
}

document.querySelectorAll('.s-box').forEach(box => {
	box_listener(box);
});

document.body.onclick = e => {
	document.querySelectorAll('.dropdown').forEach(el => el.style.display = 'none');
}

[Евгений Павлов]

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

[Евгений Павлов]

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