Форум

Булат Азат улы · #1 (**permalink**) 07.05.2023, 15:19

Всех приветствую, товарищи!
Имею ввод текста <input>, и ниже на странице из базы загружается список <option><datalist> для этого <input>, на каждом <option> имеется "data-id", который извлекается из базы в соответствии с данными в <option>.
Хотел при клике на <option>, когда они всплывают при фокусе на <input>, с помощью jQuery выполнить функцию с извлечением информации "data-id" с <option>, но функция, которцю я написал, не работает.
Не могли бы помочь, как я это могу сделать при помощи jQuery?

Код HTML:

<input id='klName' type='text' list='klList'>
<datalist id='klList'><option data-id='1'>Имя 1</option><option data-id='2'>Имя 2</option></datalist>

Код JS, в котором не работает выборка "option":

$("#klList option").click(function(){
	var klDataId = $(this).data("id");
	$.ajax ({
		url: "/adm/ajax/main.php",
		type: "POST",
		data: ({
			btn: "dtKlName",
			klId: klDataId
		}),
		dataType: "html",
		beforeSend: function() {
			$("#floatWait").fadeIn();
		},
		success: function(data) {
			$("#floatWait").fadeOut();
			alert(data);
		}
	});
});

рони · #2 (**permalink**) 07.05.2023, 15:49

Булат Азат улы,
может отслеживать изменение input и без всяких data-id

$("#klName").on('input',function(){

var klDataId = {'Имя 1' : '1', 'Имя 2'  : '2'}[this.value];
$.ajax ({  //

Булат Азат улы · #3 (**permalink**) 07.05.2023, 16:17

рони,
в <datalist> будут сотни вариантов - это имена клиентов с базы. А в "data-id" хранятся их идентификаторы из БД. То есть, при загрузке страницы генерируется огромный список datalist - из БД загружаются имена клиентов и их ID.
А <input> находится в окне создания нового клиента. Если сотрудник начнёт вводить имя клиента (а оно уже есть в базе) - всплывёт <datalist>, а при нажатии на имя, по задумке - должно выйти диалоговое окно, в котором приводятся данные клиента, который есть в базе. Точно такой же <datalist> есть и для <input> с телефоном.

В общем, извините, но я не очень понял, что вы предложили.

рони · #4 (**permalink**) 08.05.2023, 06:01

Булат Азат улы,
единственный вариант при изменении значения в input, если вы не хотите на сервере создавать объект с данными, перебор всех option на предмет фильтрации на текст, равный на данный момент в input или создание объекта с данными на клиенте.

рони · #5 (**permalink**) 08.05.2023, 06:28

Булат Азат улы,

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

создание объекта с данными на клиенте.

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        $(function() {
            let data = {};
            let options = document.querySelector('#klList').options;
            for (let {
                    text,
                    dataset: {
                        id
                    }
                } of options) data[text] = id;
            $("#klName").on('input', function() {
                let value = this.value;
                var klDataId = data[value];
                if (klDataId) {
                    //отправляем $.ajax
                    alert(`Выбрано имя ${value}, klDataId = ${klDataId}`);
                }
            })
        });
    </script>
</head>
<body>
    <input id='klName' type='text' list='klList'>
    <datalist id='klList'><option data-id='1'>Имя 1</option><option data-id='2'>Имя 2</option></datalist>
</body>
</html>

рони · #6 (**permalink**) 08.05.2023, 13:42

Булат Азат улы,
для облегчения понимания...
вопрос: можно ли нормально отследить клик на option?
ответ: нет! если такая необходимость возникла, вы что-то хотите сделать не так, и нужно подумать над другими вариантами.

Булат Азат улы · #7 (**permalink**) 08.05.2023, 13:56

рони, Спасибо большое!!!

Булат Азат улы · #8 (**permalink**) 08.05.2023, 14:18

рони,
уверен, у вас опыта намного больше - не могли бы посоветовать что-то лучше?
В общем, это я делаю "личный кабинет" для приёмки бытовой техники, там будут вводиться данные клиентов, которые оставляют аппарат на ремонт (в основном имя и телефон), и данные аппарата (марка, модель, серийный номер, неисправность и т.д.). Так как данные сохраняются в базе (есть отдельная таблица с клиентами и аппаратами (каждая модель привязывается к своей марке)), для удобства ввода и для того, чтобы в базе не дублировались клиенты и марки/модели аппаратов, на странице генерируются списки "datalist" именами, телефонами клиентов, марками и моделями аппаратов из БД. И когда человек начинает вводить имя, телефон или марку/модель аппарата, он может просто его выбрать. А при выборке, для связи с базой, на каждом названии <option> присваивается ID с БД, чтобы связать его. То есть, Иван имеет телефон 1234567 - значит, в <option> с его именем и его телефоном будет один и тот же "data-id" - тот, который имеет в БД. И при любом выборе (его имени или телефона), загрузятся его данные.

Не могли бы посоветовать, как можно длугим более правильным способом сделать задуманное? Хотел сделать с <select> - но там только выбор (в моём случае это может быть тысячи вариантов), нельзя начать вводить и отфильтровать список.

рони · #9 (**permalink**) 08.05.2023, 14:32

Булат Азат улы,
не тащить все имена и телефоны, а
при вводе 3 букв или 3 цифр и более, делать запрос на сервер и выводить подходящий под введённое список. гуглить Autocomplete и здесь на форуме.
примерно как это работает смотреть тут https://jqueryui.com/autocomplete/#remote-jsonp

Форум

Справочник

Discord чат

Курсы javascript