Загрузка городов в select2

@mack_91 · Регистрация: 15.08.2012

Студворк — интернет-сервис помощи студентам

Привет всем. Может у кого-то есть готовые решения, вдруг делали когда-либо. В общем есть 3 таблицы в БД. COUNTRIES, REGIONS и CITIES.
Хотелось бы, при наборе в форме первых букв города подгружались города с названием региона и страны. Используется расширение select2.
Например вводим в форме: Мо
а ниже выпадает:

HTML5
1
2
3
4
5
6
7
<optgroup label="Россия. Московская область">
     <option value="1">Москва</option>
     <option value="2">Можайск</option>
</optgroup>
<optgroup label="Украина. Винницкая область">
     <option value="3">Могилев-Подольский</option>
</optgroup>

Соответственно данные берутся из БД. Просто не хочется грузить все городам потом выбирать из списка. Удобнее подгружать по мере набора. Проблема в том, что знания в Ajax у меня никудышные, поэтому и застрял тут.

Пожалуйста, помогите кто может или хотя бы на пальцах покажите как можно организовать подобный запрос к контроллеру, с выводом результатов. во вьюхе. Составить запросы в БД я и сам могу, проблема получить данные с помощью Ajax

в README есть пример который подгружает JSON, только я не знаю, как его переделать под себя

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
    <?php
    echo CHtml::textField('movieSearch', '', array('class' => 'span5', 'style'=>'width:400px;'));
    $this->widget('ext.select2.ESelect2', array(
        'selector' => '#movieSearch',
        'options' => array(
            'placeholder' => 'Search a movie',
            'minimumInputLength' => 1,
            'ajax' => array(
                'url' => 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',
                'dataType' => 'jsonp',
                'data' => 'js: function(term,page) {
                        return {
                            q: term, 
                            page_limit: 10,
                            apikey: "e5mnmyr86jzb9dhae3ksgd73" // Please create your own key!
                        };
                    }',
                'results' => 'js: function(data,page){
                    return {results: data.movies};
                }',
            ),
            'formatResult' => 'js:function(movie){
                var markup = "<table class=\"movie-result\"><tr>";
                if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
                    markup += "<td class=\"movie-image\"><img src=\"" + movie.posters.thumbnail + "\"/></td>";
                }
                markup += "<td class=\"movie-info\"><div class=\"movie-title\">" + movie.title + "</div>";
                if (movie.critics_consensus !== undefined) {
                    markup += "<div class=\"movie-synopsis\">" + movie.critics_consensus + "</div>";
                }
                else if (movie.synopsis !== undefined) {
                    markup += "<div class=\"movie-synopsis\">" + movie.synopsis + "</div>";
                }
                markup += "</td></tr></table>";
                return markup;
            }',
            'formatSelection' => 'js: function(movie) {
                return movie.title;
            }',
        ),
    ));

@LaPyX · 23.07.2013, 08:18

плагин jquery autocomplete - http://jqueryui.com/autocomplete/

@mack_91 · 23.07.2013, 14:14 **[ТС]**

Сообщение от LaPyX

плагин jquery autocomplete

Подключил его. Взял код из примера и добавил в него .data() и он почему-то перестал работать. Если .data() убрать, то код работает, но вы выпадающем списке пусто... у меня ведь нет поля label. Я хочу, чтобы в выпадающем списке выводились например ID городов или названия.

А экшене site/test2 данные выводятся в формате:

JavaScript
1
[{"id":"6","country_id":"4","region_id":"5","name_ru":"Москва"}]

Вот JS с добавленным .data()

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
$(function() {
    function log( message ) {
        $( "<div>" ).text( message ).prependTo( "#log" );
        $( "#log" ).scrollTop( 0 );
    }
    
        $( "#birds" ).autocomplete({
        source: "http://site.loc/index.php?r=site/test2",
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
            "Selected: " + ui.item.name_ru + " aka " + ui.item.id :
            "Nothing selected, input was " + this.value );
            }
        });
        
        .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" ).append( item['id'] ).appendTo( ul );
        };
});
</script>

@LaPyX · 23.07.2013, 15:03

у вас ошибка

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
$(function() {
    function log( message ) {
        $( "<div>" ).text( message ).prependTo( "#log" );
        $( "#log" ).scrollTop( 0 );
    }
    
        $( "#birds" ).autocomplete({
        source: "http://site.loc/index.php?r=site/test2",
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
            "Selected: " + ui.item.name_ru + " aka " + ui.item.id :
            "Nothing selected, input was " + this.value );
            }
        }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li>" ).append( item['id'] ).appendTo( ul );
        };
});
</script>

@mack_91 · 23.07.2013, 15:11 **[ТС]**

Ооо благодарчик, работает))) А еще сейчас вот узнал, что в Yii есть CJuiAutoComplete. Буду разбираться как он работает, если не получится, то уже сделаю данным способом)

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@LaPyX 40 / 40 / 6 Регистрация: 17.04.2013 Сообщений: 196
	23.07.2013, 08:18
	плагин jquery autocomplete - http://jqueryui.com/autocomplete/ 0

@mack_91 121 / 66 / 9 Регистрация: 15.08.2012 Сообщений: 266
	23.07.2013, 15:11 [ТС]
	Ооо благодарчик, работает))) А еще сейчас вот узнал, что в Yii есть CJuiAutoComplete. Буду разбираться как он работает, если не получится, то уже сделаю данным способом) 0