Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Список возможных значений через JSON вывести под Input
 
 автор: Port_Artur3   (02.05.2015 в 00:22)   письмо автору
 
 

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.


Помогите пожалуйста.

  Ответить  
 
 автор: confirm   (02.05.2015 в 07:19)   письмо автору
 
   для: 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>

Но не все просто с этим удобным элементом, есть и сложности.

  Ответить  
 
 автор: Port_Artur3   (02.05.2015 в 08:19)   письмо автору
 
   для: 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 в 16:33)   письмо автору
 
   для: 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 стрелочка справа появляется, а самого списка нет?
запрос у меня нормальный, я проверял через

alert (data[i].name);


- выводит в цикле все значения что надо, теперь нужно в options их засунуть и отобразить.

Помогите пожалуйста, почему у меня не появляется список cо значениями под полем Input?

  Ответить  
 
 автор: confirm   (02.05.2015 в 19:07)   письмо автору
 
   для: Port_Artur3   (02.05.2015 в 16:33)
 

Вставить не проблема, проблема возникнет с обработкой событий. Поэтому, сперва возьмите отдельный input, к нему уже готовый datalist, и попробуйте написать сценарий отвечающий вашей задаче, учитывающий момент получения значения из списка. Ваш список, кроме имени имеет значения и пола, они что не учитываются в итоге?

  Ответить  
 
 автор: Port_Artur3   (02.05.2015 в 19:19)   письмо автору
 
   для: confirm   (02.05.2015 в 19:07)
 

Если не проблема, тогда почему у меня не работает?
Причём тут сценарий, мне полученные данные нужно вывести списком.

Да я пробую чтобы заработало хоть как-то сначала. Пусть хоть имена начнёт списком показывать, потом добавить остальное не проблема. Проблема, что список не появляется

  Ответить  
 
 автор: confirm   (02.05.2015 в 20:02)   письмо автору
 
   для: 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>


А вот "потом не проблема" - пробуйте.

  Ответить  
 
 автор: Port_Artur3   (02.05.2015 в 21:04)   письмо автору
 
   для: confirm   (02.05.2015 в 20:02)
 

И зачем мне этот код?
Я просил помочь с моим кодом. А вы хотите чтобы я разбирался в вашем.
Подожду cheops.

  Ответить  
 
 автор: confirm   (02.05.2015 в 21:22)   письмо автору
 
   для: Port_Artur3   (02.05.2015 в 21:04)
 

И зачем мне этот код?

Вот для этого Да я пробую чтобы заработало хоть как-то сначала.

Я просил помочь с моим кодом. А вы хотите чтобы я разбирался в вашем.

Если вы простого не понимаете и даже не поняли, что не так прост datalist касаемо событий, о чем я говорил, то ваше заявление "Пусть хоть имена начнёт списком показывать, потом добавить остальное не проблема." слишком смелое.

Ждите.

  Ответить  
 
 автор: Port_Artur3   (02.05.2015 в 22:29)   письмо автору
 
   для: confirm   (02.05.2015 в 21:22)
 

Буду ждать

  Ответить  
 
 автор: Port_Artur3   (03.05.2015 в 01:39)   письмо автору
 
   для: Port_Artur3   (02.05.2015 в 22:29)
 

<datalist id="name"> не походит, не поддерживается android и iOS

Как сделать, чтобы появлялось поле со значениями и при клике на значения оно вставлялось в Input , и при этом поле исчезало

  Ответить  
 
 автор: confirm   (03.05.2015 в 07:48)   письмо автору
 
   для: Port_Artur3   (03.05.2015 в 01:39)
 

Наконец-то удосужились не ждать, а заняться делом. То что дрон не поддерживает на данный момент, это пол беды, главное отличие datalist от списка, это отсутствие события onchange, а ваши данные кроме имени содержат и иные, и это тоже вторая проблема, которую надо решать.

Готовый плагин используйте, они используют для этого иные элементы.

  Ответить  
 
 автор: Deed   (03.05.2015 в 14:20)   письмо автору
 
   для: Port_Artur3   (02.05.2015 в 00:22)
 

http://stackoverflow.com/questions/8951810/how-to-parse-json-data-with-jquery-javascript

  Ответить  
 
 автор: Port_Artur3   (04.05.2015 в 01:03)   письмо автору
 
   для: Deed   (03.05.2015 в 14:20)
 

Спасибо ВСЕМ, тема закрыта.

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования