Живой поиск в двух окнах. Как правильно сформировать код?

Question

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

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

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

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

Comments

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

Ivan, Нет, я хочу чтобы в одном в одном окне работал живой поиск и в другом окне тоже был живой поиск. Не одно окно было поисковым, а сразу два.

[historydev]

Евгений Павлов, не нужно ничего менять, просто сделай так, как я написал. Скопируй и вставь - всё.

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

Владимир, вы могли бы мне правильно форму прописать с двумя тегами input. Какие там указывать ID и Class. Спасибо

[historydev]

Евгений Павлов, вам не нужен там второй инпут. Вам нужен копипаст блока .s-box со всем содержимым

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

Владимир, но текст не вставляется в окно, когда я его выбираю из выпадающего списка. Вернулась вчерашняя ошибка.

Answer 1

[historydev]

Блоки:

input - класс s-input . dropdown - класс dropdown. box - класс s-box

Достаточно назначить классы и вызвать функцию:

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

function box_listener(box){
  const input = box.querySelector('.s-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');
}

Comments

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

Я вставил этот код, что вы прислали, но ничего не получается

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

и вставил Js, что вы прислали, но ничего не выходит

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

Вы могли бы мне форму полностью прописать правильно с классами и id

[historydev]

Евгений Павлов, что в консоли?

[historydev]

Евгений Павлов, всё работает.

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

Владимир, работает два окна, но теперь снова не вставляется текст в окна, когда я их выбираю.

Форма:

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

код jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function box_listener(box){
  const input = box.querySelector('.s-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');
}
</script>

Ошибки в консоли:

Uncaught ReferenceError: e is not defined
onclick http://
fetch_data http://
fetch_data http://
jQuery 7
c
fireWith
l
o
send
ajax
i
fetch_data http:
index.php:60:32
onclick http://
(Асинхронный: EventHandlerNonNull)
fetch_data http://
forEach self-hosted:203
fetch_data http:
jQuery 7
fetch_data http:

[historydev]

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

item.onclick = e => e.target.value = item.innerText;

Замени вот здесь, опечатался

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

Владимир, Заменил, снова не вставляется.

Код HTML:

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

Код JS:

<script>
function box_listener(box){
  const input = box.querySelector('.s-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 => 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');
}
</script>

[historydev]

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

item.onclick = _ => input.value = item.innerText;

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

Владимир, Ура! Все хорошо. Большое вам спасибо!

Подскажите пожалуйста, а подсвечивание строки, когда навожу курсор на выпадающий список можно будет реализовать CSS или лучше JS?

[historydev]

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

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

Владимир, Огромное Вам спасибо за уделенное время.

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

Владимир, последнее, где вставить в ваш код (см. код), когда ничего в базе данных не нашлось, то срабатывает другой JS

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

[historydev]

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

if (data != "not found")

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

Владимир, или нужно создать условие?

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

Владимир, правильно будет так:

if (data != "files/jscod.js")

??

[historydev]

Евгений Павлов, зависит от того, что в data

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

Владимир,

if (isset($_POST['s'])) {
  выборка из базы 
} esle {
 echo " not found"
}

if (data != "not found") {
        dropdown.style.display = 'block';
        dropdown.innerHTML = data;
        box.querySelectorAll('.dropdown li').forEach(item => {
            item.onclick = _ => input.value = item.innerText;
        });
      }  else {
       "Если правильно, то как загрузить файл для выполнения, что тут указать (синтаксис)?"
}

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

Владимир,

if (data != "not found") {
        dropdown.style.display = 'block';
        dropdown.innerHTML = data;
        box.querySelectorAll('.dropdown li').forEach(item => {
            item.onclick = _ => input.value = item.innerText;
        });
      }  else {
       "files/jscode.js"
}

достаточно будет этого или это не безопасно?

[historydev]

Евгений Павлов, погуглите что такое api

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

Владимир, я JS и JQUERY не знаю вообще (полный ноль), я могу сесть за книги и на пол года углубиться в изучение языка, а также сидеть на сайте qna.habr.com и вникать в суть языка. И это нужно мне сделать для того, чтобы написать 10 строк кода? Но если я не буду постоянно программировать, я забуду это ремесло, забуду синтаксис. Я могу купить скрипт, где мне напишут его от 500 - 2000 рублей и растолкуют все по полкам, а могу за помощью обратиться на сайт qna.habr.com, где мне выжмут все мозги, чтобы я добавил класс туда или заменил класс этим. Я не знаю как это сделать, ну не знаю и все. Я прошу вас подсказать мне, если это сложно, не нужно это делать, если сможете, то подскажите развернутым ответом, пропишите мне и классы и id. Все же поэтому я и обращаюсь на этот сайт, где такие лузеры как я ищут решения, ответа.

[historydev]

Евгений Павлов, вы не ищете ответа, вам нужно чтобы всё сделали за вас. Я сделал. На остальное создавайте новый вопрос и ждите ответ.

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

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

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

Владимир, Получается у вас так.

- Вам нужно, чтобы за вас написали код, но нет, так не получится.
- Я вам сначала изнасилую мозг, поиздеваюсь над вами, но потом, я скажу ответ.

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

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

[historydev]

Евгений Павлов, всё верно ;)

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

Владимир, так изначально было понятно, я думал вас не хватит (но я продолжил ради интереса), но вы наверное с трудом выжали из себя, дописав его. Но сколько время вы потратили на это

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

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

[historydev]

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

{error?: string; message: string;}

if(data.error) // Try A else // Try B

Answer 2

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

Владимир, я правильно ввел?

<form>
      		<div class="s-box">
      		<input type="text" id="input" autocomplete="off" class="s-input">
                <input type="text" id="s-input.dropdown" autocomplete="off" class="dropdown.box">
                <ul class="dropdown" id="dropdown"></ul>
      		</div>
</form>

А то ничего не получается снова.