3

Ребята, помогите пожалуйста, не получается вывести данные от запроса для autocomplete. Использую этот плагин: https://github.com/devbridge/jQuery-Autocomplete

Код вот такой: $(function(){

function Autocomplete(url, element){
          element.autocomplete({
            serviceUrl: url,
            onSelect: function (suggestion) {
              var thehtml = '<strong>Currency Name:</strong> ' + suggestion.name + ' <br> <strong>Symbol:</strong> ' + suggestion.id;
              $('#outputcontent').html(thehtml);
            }
          });
}

  $('.autocompleteSearch input.auto').keypress(function(){
       Autocomplete($(this).attr('url'), $(this));    
 });

});

Проблема в выводе suggestion.name и suggestion.id

Возвращает от сервера формат JSON такого вида:

suggestion: {id:[3], name:[Клиника коррекции зрения]}

Вот так сделал, но все равно не прошло:

$(function () {
$('#autocomplete-ajax').autocomplete({
    source: function(request, response){
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url : '/institution/GetList',

            data:{
                maxRows: 12, // показать первые 12 результатов
                nameStartsWith: request.term // поисковая фраза
            },
            success: function(data){
                response($.map(data, function(item){
                    return {
                        plink: item.plink, // ссылка на страницу товара
                        label: item.title_ru // наименование товара
                    }
                }));
            }
        });
    },
    select: function( event, ui ) {
        // по выбору - перейти на страницу товара
        // Вы можете делать вывод результата на экран
        location.href = ui.item.plink;
        return false;
    },
    minLength: 3 // начинать поиск с трех символов
});
});

Обработчик:

public function GetList(){
        $res = array();
        if ($this->input->get('term')){
            $result = $this->institutions_model->GetInstitutions(array('like' => $this->input->get('term')));
            if (!empty($result)) {
                foreach ($result as $value) {
                    $res[] = array('id' => $value->idMedicalFacilities, 'name' => $value->MedicalFacilitiesName);
                }
            }
        }
        echo json_encode($res);
    }

Пишет в консоли такую ошибку:

GET http://site.ru/user/null?query=%D0%BA 404 (Not Found)

4
  • Оффтоп. А чем он принципиально лучше, чем родной плагин [ Autocomplete jQuery UI][1]? Более подробная документация или скрытые возможности? [1]:jqueryui.com/autocomplete
    – Deonis
    21 сен 2013 в 22:03
  • Приведите пожалуйста пример для Autocomplete jQuery UI, чтобы можно было получить Name записи и Id по выбору из списка. Спасибо
    – IOleg
    21 сен 2013 в 22:36
  • Вот такой пример у меня не работает, т-е не делает alert и ничего не отображает на странице: $(function(){ function Autocomplete(url, element){ element.autocomplete({ minLength: 1, source: url, focus: function( event, ui ) { //$( "#project" ).val( ui.item.label ); return false; }, select: function( event, ui ) { alert(ui.item.id); return false; } }) } $('.autocompleteSearch input.auto').keypress(function(){ Autocomplete($(this).attr('url'), $(this)); }); });
    – IOleg
    21 сен 2013 в 22:56
  • @Deonis, у вас должно кармы хватать чтобы забрасывать в комментарий... @junart если ваш "ответ" не дает ответ, а вы хотите дополнить вопрос - дополняйте вопрос.
    – zb'
    22 сен 2013 в 11:30

1 ответ 1

4

В комментарий не поместилось, посему пишу ответом

Приведите пожалуйста пример

На официальом сайте, примеров море. Если и того мало, то могу показать свой, взятый из реального проекта - поиск по группе товаров. (Лишнее убрал, серверную честь схематизировал, основные настройки у меня находятся в $.ajaxSetup())

JS

$('#search_field').autocomplete({
    source: function(request, response){
        $.ajax({
            data:{
                maxRows: 12, // показать первые 12 результатов
                nameStartsWith: request.term // поисковая фраза
            },
            success: function(data){
                response($.map(data, function(item){
                    return {
                        plink: item.plink, // ссылка на страницу товара
                        label: item.title_ru // наименование товара
                    }
                }));
            }
        });
    },
    select: function( event, ui ) {
        // по выбору - перейти на страницу товара
        // Вы можете делать вывод результата на экран
        location.href = ui.item.plink;
        return false;
    },
    minLength: 3 // начинать поиск с трех символов
});

PHP

// Ищем в БД по ключевому слову $_POST['nameStartsWith']
// Если что-то находим, то формируем ответ:
$response = array(); 
while($row = $res->fetch()){
    $response[] = array(
        'title_ru' => $row['title_ru'],
        'plink' => itemPath($row['item_id']) // тут у меня функция формирует ссылку
        /* добавлять можно всё, что угодно. Хоть маму с папой впихнуть ;) */
    );
}
echo json_encode($response);
exit;

P.S. Опции ajax за кадром - type: 'POST', dataType: 'json', url: '/тут ваш/', всякие beforeSend, complete, error - на ваше усмотрение. Все, что вам остается сделать - это подключить виджет Autocomplete и указать свой селектор поискового поля формы.

1
  • Спасибо. Только сейчас при выборе подсвеченного результата, в поле вставляет ID записи а не название. Нужно наоборот, чтобы в скрытое поле добавлялось ID выбранной записи, а в input название выбранного элемента.
    – IOleg
    22 сен 2013 в 14:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.