Страница 1 из 1

Autocomplete вывод результата в div

СообщениеДобавлено: 14 сен 2012, 21:33
darl
Доброе время суток, сразу скажу, я новичок в jQuery, так что возможно я задаю глупый вопрос, проблема такова, мне необходим по мере набора текста в форму,чтоб в определенном div появлялись возможные результаты, и чтоб не в <li>, а уже мной оформленные в css. Не могу понять как это сделать, хоть поверните меня в нужное направление.
Вот мой код:
Код: выделить все
$('#input_text').autocomplete({
        source:'/Group/autocomplete',
        minLength:1,
         //appendTo:'#auto',


Сам php файл /Group/autocomplete, приводить не буду, т.к. он отрабатывает и возвращает array вида
Код: выделить все
[{ "id": "1", "firs_tname": "first_name", "lastname": "lastname"}
,{ "id": "1", "firs_tname": "first_name", "lastname": "lastname"}
]

Пытаюсь использовать appendTo, он вставляет в div id=auto, <li> объект , и почему то вообще не отображается в обозревателе, только при отображении html кода страницы видно эту вставку.
Скорей всего задача тривиальная, но вот не могу понять, два дня бьюсь.

Re: Autocomplete вывод результата в div

СообщениеДобавлено: 16 сен 2012, 15:01
zandroid
Если вы используете jQuery UI Autocomplete, то не пытайтесь изменить генерируемый им HTML (он генерирует UL+LI), в этом нет смысла и никакой пользы. А вот прикрутить какие-то дополнительные CSS к нему вполне можно. У каждого элемента есть определенный CSS-класс, их легко увидеть в инспекторе DOM (Chrome Developer / Firefox Developer / FireBug ), используйте их для своих нужд.

Re: Autocomplete вывод результата в div

СообщениеДобавлено: 16 сен 2012, 16:23
XelaNimed
Здравствуйте.
Все, что Вам нужно, это лишь добавить обработчик события к Вашему текстовому полю. При наборе текста, как мне кажется, лучше всего подойдет keyup. Для снижения количества запросов ajax к серверу можно использовать отложенное выполнение функции с помощью setTimeout на определенное время и отменять ее выполнение при следующем событии. Это позволит не обращаться к серверу каждый раз, когда пользователь отпустил клавишу, а только в случае определенной паузы. Дополнительно можно ограничить минимальную длину искомого/запрашиваемого. В-общем тот-же atocomplete, только сильно-сильно усеченный.
Код: выделить все
$(function() {
    $('input#search').on('keyup', function(event) {
        /* Инициализируем переменные в локальной области видимости.  */
        var self = this,
            url = 'path/to/script.php',
            minLength = 3,
            delay = 500;
        /* Отменяем отложенный запуск функции
          (если доступна ссылка на timeout). */
        if (arguments.callee.timeoutID !== undefined) {
            window.clearTimeout(arguments.callee.timeoutID);
        }
        /* Откладываем на время delay запуск функции
          и сохраняем ссылку на timeout в переменной. */
        arguments.callee.timeoutID = window.setTimeout(function() {
          /* Выполняем запрос и вывод/очистку результатов. */
          /* Если значение поля больше или равно минимальной длинне,
            то выполняем запрос... */
          if (self.value.length >= minLength) {
            /*
              $.ajax({
                type: 'post',
                dataType: 'json',
                data:{query:self.value},
                url: url,
                cache:false,
                success:function(data){
                  // Здесь обрабатываем ответ от сервера.
                  // $('<div>'+data.firstname+' '+data.lastname+'</div>')
                  //   .data('personID', data.id)
                  //   .appendTo('#responseContainer');
                }
              });
              */
          }
        }, delay);
    });
});​

В функции обратного вызова success Вы получите ответ сервера и можете обрабатывать его по своему усмотрению.
Побаловаться можно здесь jsfiddle.net/XelaNimed/F7bbH/

Re: Autocomplete вывод результата в div

СообщениеДобавлено: 17 сен 2012, 20:52
darl
XelaNimed писал(а):Здравствуйте.
Все, что Вам нужно, это лишь добавить обработчик события к Вашему текстовому полю. При наборе текста, как мне кажется, лучше всего подойдет keyup. Для снижения количества запросов ajax к серверу можно использовать отложенное выполнение функции с помощью setTimeout на определенное время и отменять ее выполнение при следующем событии. Это позволит не обращаться к серверу каждый раз, когда пользователь отпустил клавишу, а только в случае определенной паузы. Дополнительно можно ограничить минимальную длину искомого/запрашиваемого. В-общем тот-же atocomplete, только сильно-сильно усеченный.
Код: выделить все
$(function() {
    $('input#search').on('keyup', function(event) {
        /* Инициализируем переменные в локальной области видимости.  */
        var self = this,
            url = 'path/to/script.php',
            minLength = 3,
            delay = 500;
        /* Отменяем отложенный запуск функции
          (если доступна ссылка на timeout). */
        if (arguments.callee.timeoutID !== undefined) {
            window.clearTimeout(arguments.callee.timeoutID);
        }
        /* Откладываем на время delay запуск функции
          и сохраняем ссылку на timeout в переменной. */
        arguments.callee.timeoutID = window.setTimeout(function() {
          /* Выполняем запрос и вывод/очистку результатов. */
          /* Если значение поля больше или равно минимальной длинне,
            то выполняем запрос... */
          if (self.value.length >= minLength) {
            /*
              $.ajax({
                type: 'post',
                dataType: 'json',
                data:{query:self.value},
                url: url,
                cache:false,
                success:function(data){
                  // Здесь обрабатываем ответ от сервера.
                  // $('<div>'+data.firstname+' '+data.lastname+'</div>')
                  //   .data('personID', data.id)
                  //   .appendTo('#responseContainer');
                }
              });
              */
          }
        }, delay);
    });
});​

В функции обратного вызова success Вы получите ответ сервера и можете обрабатывать его по своему усмотрению.
Побаловаться можно здесь jsfiddle.net/XelaNimed/F7bbH/

Спасибо большое! Выручили!