Событие нажатия на "option" в "datalist"
Всех приветствую, товарищи!
Имею ввод текста <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);
}
});
});
|
Булат Азат улы,
может отслеживать изменение input и без всяких data-id
$("#klName").on('input',function(){
var klDataId = {'Имя 1' : '1', 'Имя 2' : '2'}[this.value];
$.ajax ({ //
|
рони,
в <datalist> будут сотни вариантов - это имена клиентов с базы. А в "data-id" хранятся их идентификаторы из БД. То есть, при загрузке страницы генерируется огромный список datalist - из БД загружаются имена клиентов и их ID. А <input> находится в окне создания нового клиента. Если сотрудник начнёт вводить имя клиента (а оно уже есть в базе) - всплывёт <datalist>, а при нажатии на имя, по задумке - должно выйти диалоговое окно, в котором приводятся данные клиента, который есть в базе. Точно такой же <datalist> есть и для <input> с телефоном. В общем, извините, но я не очень понял, что вы предложили. |
Булат Азат улы,
единственный вариант при изменении значения в input, если вы не хотите на сервере создавать объект с данными, перебор всех option на предмет фильтрации на текст, равный на данный момент в input или создание объекта с данными на клиенте. |
click for option
Булат Азат улы,
Цитата:
<!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>
|
Булат Азат улы,
для облегчения понимания... вопрос: можно ли нормально отследить клик на option? ответ: нет! если такая необходимость возникла, вы что-то хотите сделать не так, и нужно подумать над другими вариантами. |
рони, Спасибо большое!!!
|
рони,
уверен, у вас опыта намного больше - не могли бы посоветовать что-то лучше? В общем, это я делаю "личный кабинет" для приёмки бытовой техники, там будут вводиться данные клиентов, которые оставляют аппарат на ремонт (в основном имя и телефон), и данные аппарата (марка, модель, серийный номер, неисправность и т.д.). Так как данные сохраняются в базе (есть отдельная таблица с клиентами и аппаратами (каждая модель привязывается к своей марке)), для удобства ввода и для того, чтобы в базе не дублировались клиенты и марки/модели аппаратов, на странице генерируются списки "datalist" именами, телефонами клиентов, марками и моделями аппаратов из БД. И когда человек начинает вводить имя, телефон или марку/модель аппарата, он может просто его выбрать. А при выборке, для связи с базой, на каждом названии <option> присваивается ID с БД, чтобы связать его. То есть, Иван имеет телефон 1234567 - значит, в <option> с его именем и его телефоном будет один и тот же "data-id" - тот, который имеет в БД. И при любом выборе (его имени или телефона), загрузятся его данные. Не могли бы посоветовать, как можно длугим более правильным способом сделать задуманное? Хотел сделать с <select> - но там только выбор (в моём случае это может быть тысячи вариантов), нельзя начать вводить и отфильтровать список. |
Булат Азат улы,
не тащить все имена и телефоны, а при вводе 3 букв или 3 цифр и более, делать запрос на сервер и выводить подходящий под введённое список. гуглить Autocomplete и здесь на форуме. примерно как это работает смотреть тут https://jqueryui.com/autocomplete/#remote-jsonp |
| Часовой пояс GMT +3, время: 22:43. |