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
    Commented 21 сент. 2013 в 22:03
  • Приведите пожалуйста пример для Autocomplete jQuery UI, чтобы можно было получить Name записи и Id по выбору из списка. Спасибо
    – IOleg
    Commented 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
    Commented 21 сент. 2013 в 22:56
  • @Deonis, у вас должно кармы хватать чтобы забрасывать в комментарий... @junart если ваш "ответ" не дает ответ, а вы хотите дополнить вопрос - дополняйте вопрос.
    – zb'
    Commented 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
    Commented 22 сент. 2013 в 14:11

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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