|
|
|
| AJAX посылает скрипту то, что находится в поле Input, при количестве введённых символов в поле 2 и более. Тот в ответ передает нам список вариантов для выбора. Наш JS при получении этого списка вставляет полученные данные в какой-нибудь блок, позиционирует его относительно поля ввода и показывает его. При снятии фокуса с поля - блок скрывается. При клике на одну из строчек с возможными значениями оно вставляется в в поле input.
есть вот такой пример:
$(function() {
$('input[name="DC"]').on('keyup', function () {
var $input = $(this);
$.ajax({
url: '/items.php',
data: {code: $input.val()},
type: 'post',
dataType: 'json',
success: function (data) {
$('input[name="name"]').val(data.name);
$('input[name="price"]').val(data.price);
}
})
});
});
|
Иногда у меня получается найденный код, доработать под свои нужды. Но это не тот случай.
Поле вот такое
<input type="text" name="DC" value="" />
|
Ответ JSON:
[{"name":"Света","local":false,"gender":1},{"name":"Светлана","local":false,"gender":1},...
|
Значений в ответе может быть до 30
Нужно отправить запрос и полученные значения вывести списком под полем, а при клике в поле Input внести значение поля name:
пол - имя
1- Света
пол - это значение gender.
Помогите пожалуйста. | |
|
|
|
|
|
|
|
для: Port_Artur3
(02.05.2015 в 00:22)
| | Плагин autocomplete выбирайте и подключайте, а их много. В рамках же HTML5 существует готовое решение - элемент datalist, который своим id привязан к атрибуту list поля input.
<input list="name">
<datalist id="name">
<option value="Света">девочка Света</option>
<option value="Светлана">девочка Света</option>
<option value="Петя">мальчик Петя</option>
</datalist>
|
Но не все просто с этим удобным элементом, есть и сложности. | |
|
|
|
|
|
|
|
для: confirm
(02.05.2015 в 07:19)
| | Я не пойму как мне вот здесь :
success: function (data) {
$('input[name="name"]').val(data.name);
$('input[name="price"]').val(data.price);
}
|
в цикле (значений может быть несколько) вывести значения в datalist моего Input ? | |
|
|
|
|
|
|
|
для: Port_Artur3
(02.05.2015 в 08:19)
| | Пробую вот так:
<input type="text" name="DC" id="DC" list="DD" onKeyUp="DC();" value="" />
<datalist id="DD">
</datalist>
|
Вывести пытаюсь так :
<script>
var options = '';
function DC() {
...
$.ajax({
url: 'запрос',
success: function(data) {
for (var i = 0; i < data.length; i++) {
options = options+'<option value="'+data[i].name+'" />';
}
}
});
document.getElementById('DD').innerHTML = options;
...
|
В поле Input стрелочка справа появляется, а самого списка нет?
запрос у меня нормальный, я проверял через
- выводит в цикле все значения что надо, теперь нужно в options их засунуть и отобразить.
Помогите пожалуйста, почему у меня не появляется список cо значениями под полем Input? | |
|
|
|
|
|
|
|
для: Port_Artur3
(02.05.2015 в 16:33)
| | Вставить не проблема, проблема возникнет с обработкой событий. Поэтому, сперва возьмите отдельный input, к нему уже готовый datalist, и попробуйте написать сценарий отвечающий вашей задаче, учитывающий момент получения значения из списка. Ваш список, кроме имени имеет значения и пола, они что не учитываются в итоге? | |
|
|
|
|
|
|
|
для: confirm
(02.05.2015 в 19:07)
| | Если не проблема, тогда почему у меня не работает?
Причём тут сценарий, мне полученные данные нужно вывести списком.
Да я пробую чтобы заработало хоть как-то сначала. Пусть хоть имена начнёт списком показывать, потом добавить остальное не проблема. Проблема, что список не появляется | |
|
|
|
|
|
|
|
для: Port_Artur3
(02.05.2015 в 19:19)
| |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$('input').keyup(function(e) {
if(e.keyCode==40 || e.keyCode==9 || e.keyCode==13) return; //возврат при табуляции, стрелка вниз, Enter
var o = $(this).next().empty(), //получить и очистить объект datalist
d = ["Света", "Наташа", "Люба"]; //массив значений с сервера, должен быть отсортирована в обратном порядке
while(m = d.pop()) o.append('<option value="'+m+'"/>'); //добавляем список
})
});
</script>
</head>
<body>
<input list="names" />
<datalist id="names"></datalist>
</body>
</html>
|
А вот "потом не проблема" - пробуйте. | |
|
|
|
|
|
|
|
для: confirm
(02.05.2015 в 20:02)
| | И зачем мне этот код?
Я просил помочь с моим кодом. А вы хотите чтобы я разбирался в вашем.
Подожду cheops. | |
|
|
|
|
|
|
|
для: Port_Artur3
(02.05.2015 в 21:04)
| | И зачем мне этот код?
Вот для этого Да я пробую чтобы заработало хоть как-то сначала.
Я просил помочь с моим кодом. А вы хотите чтобы я разбирался в вашем.
Если вы простого не понимаете и даже не поняли, что не так прост datalist касаемо событий, о чем я говорил, то ваше заявление "Пусть хоть имена начнёт списком показывать, потом добавить остальное не проблема." слишком смелое.
Ждите. | |
|
|
|
|
|
|
|
для: confirm
(02.05.2015 в 21:22)
| | Буду ждать | |
|
|
|
|
|
|
|
для: Port_Artur3
(02.05.2015 в 22:29)
| | <datalist id="name"> не походит, не поддерживается android и iOS
Как сделать, чтобы появлялось поле со значениями и при клике на значения оно вставлялось в Input , и при этом поле исчезало | |
|
|
|
|
|
|
|
для: Port_Artur3
(03.05.2015 в 01:39)
| | Наконец-то удосужились не ждать, а заняться делом. То что дрон не поддерживает на данный момент, это пол беды, главное отличие datalist от списка, это отсутствие события onchange, а ваши данные кроме имени содержат и иные, и это тоже вторая проблема, которую надо решать.
Готовый плагин используйте, они используют для этого иные элементы. | |
|
|
|
|
|
|
|
|
для: Deed
(03.05.2015 в 14:20)
| | Спасибо ВСЕМ, тема закрыта. | |
|
|
|