jQuery autocomplete Vs Select (html)

[Rix]

Все доброго времени суток!

Возможно данная тема уже не раз звучала, но все же для не которых людей как я она еще не решена и не изведана

В общем дело вот в чем, хочу сделать страницу регистрации как на сайте Mail.ru, а именно поле для заполнение "Город". Где пользователь вводит свой город, и выполняется поиск, дописывается страна, регион к введенному городу. Теперь мне нужно при нажатии кнопки регистрации отправился ID города (и если можно страны и региона). База с данными и ID имеется.

На данный момент сделал следующее

<script>$(document).ready(function(){
var data = "Железногорск Beckum Dagu Girona Joensuu ....".split(" ");
$("#city").autocomplete(data);});
</script>
<input type="text" name="u_city" style="width:400px;" class="text" id="city">

Заранее благодарю...

[Rix]

Переписал не много код:

JS

<script type="text/javascript">
$(document).ready(function(){
$("#city").autocomplete("http://xxxxxxxx.xxx/?gm=city");
});</script>

данная страница по $_GET['q'] запросу возвращает данные в формате

while ($p = mysql_fetch_array($sql_query))
	{
	$city_list .= $p[name].'|'.$p[city_id]."\n";
	}

Получается так: Город|Id_города

Когда ввожу данные в поле отображается город и все правильно, но как сделать так чтобы ID города записал куда нибуть в др. скрытое поле hidden

например:

<input type="hidden" value="Id_города">

Плиз, очень надо... Помогите

[Golgi]

ну в принципе всё просто. Нужно добавить событие keyup и выполнять после keyup функцию, которая будет находить нужные данные и вставлять куда нужно

[Rix]

Спасибо, а можно как нибуть примером. я а то вот только начал изучать jQuery

[Golgi]

http://ruseller.com/jqueryshpora.php

там найдите нужный эвент и будет вам пример

[Great Rash]

А зачем вписывать название города? Гораздо проще сделать <select> со всеми городами, и юзер просто выберет нужный. Отсортировать по алфавиту - будет очень удобно:

<select name="city" id="city">
  <optgroup label="А">
    <option value="1">Астрахань</option>
    <option value="2">Архангельск</option>
  </optgroup>
  <optgroup label="Б">
    <option value="3">Борисоглебск</option>
    <option value="4">Бобруйск</option>
  </optgroup>
</select>

[Rix]

Вариант с Select'ом был, просто дело в том что список городов очень большой и страница при этом долго открывается. если есть какая нибуть возможность подгрузить список городов, не останавливая процесс загрузки страницы было бы здорово

http://ruseller.com/jqueryshpora.php

там найдите нужный эвент и будет вам пример

Извиняюсь за тупость, но чето не догоняю того что вы написали, если можно пример привести кусочком кода...

Заранее благодарю...

[Great Rash]

Вариант с Select'ом был, просто дело в том что список городов очень большой и страница при этом долго открывается. если есть какая нибуть возможность подгрузить список городов, не останавливая процесс загрузки страницы было бы здорово

Есть AJAX, можно подгружать список городов совершенно безболезненно.

[Rix]

Можете помочь с реализации погрузки городов в select? хотя бы дать начало, как вбить элементы в этот комбо бокс

[Great Rash]

Ну как вбить элементы я уже показал. А про саму технологию AJAX можно почитать тут

[Rix]

Спс, вот я сделал вот так...

Страница где идет выборка страны и города

<tr><td><b>Страна / Город: </b></td><td> '.$country_list.' <span id="city_place"><select name="u_city" style="width:200px;"></select></span></td><tr>

сюда $country_list забивается вот это:

$sql = "SELECT * FROM i_country ORDER BY name ASC";
$mq = mysql_query($sql, $mysql_link);
$country_list = '<select name="u_country" style="width:195px;" onchange="jsDataLoad(\'http://xxxxx.xx/?gm=city&country_id=\'+this.options[this.selectedIndex].value, \'city_place\');">'."\n";
while ($p = mysql_fetch_array($mq))
	{
	$country_list .= '<option value="'.$p[country_id].'">'.$p[name].'</option>'."\n";
	}
$country_list .= '</select>';

Выполняется запрос по адресу http://xxxxx.xx/?gm=city&country_id=1234

Страница возвращает

<select id="select" name="u_city" style="width:198px;">
<option value="278090">Айзенштадт</option>
<option value="278094">Амштеттен</option>
...
</select>

и это вставляется в

<span id="city_place">сюда</span>

и работает как часики

Но теперь вот проблема в следующем я использую библиотеку Uniform для стилизации формы и компонентов HTML при первой загрузки страницы выглядит все как надо, а вот подгружаемый Select выглядит как стандартный и выглядит не очень

что можно сделать в этом случаи?

[Nekromancer]

На события AJAX`a success (успешная загрузка) повесить функцию с таким кодом -

$("#select").uniform();

где - #select - айди вставленного селекта.

Либо так:

$("#conteiner select").uniform();

где - #conteiner - айди блока в который вставили селект.

[Rix]

На события AJAX`a success (успешная загрузка) повесить функцию с таким кодом -

$("#select").uniform();

где - #select - айди вставленного селекта.

Либо так:

$("#conteiner select").uniform();

где - #conteiner - айди блока в который вставили селект.

делал ничего не помогло, решил вопрос др. способом.

Кому интересно и кому надо вот city.php принемает запросы то есть ID Страны

<?php
header('Content-type: text/html; charset=UTF-8');
if (!defined("_NWE")) die ("");
global $mysql_link;
$id =$_GET['country_id'];
If (!is_numeric($id)) die("<span id=\"error\">Ошибка запроса</div>");
$sql = "SELECT city_id, name FROM `i_city` WHERE country_id = ".$id." ORDER BY name ASC";
$sql_query = mysql_query($sql, $mysql_link);
$rows = array();
while($r = mysql_fetch_array($sql_query)) {
   $rows[] = array(
      'id' => $r['city_id'],
      'name' => $r['name']
   );
}
print json_encode($rows); // функция json_encode есть только PHP 5.2 и выше
?>

Вот JS (jquery.json.js) код который обрабатывает запрос:

function ajaxSelect(id) {
    var element = document.getElementById(id)

    var onLoaded = function(data) {
        var i=1
        for(var key in data) {
            var label = data[key]
            element.options[i++] = new Option(label.name, label.id)
        }
    }

    var onLoadError = function(error) {
        var msg = "Ошибка "+error.errcode
        if (error.message) msg = msg + ' :'+error.message
        alert(msg)
    }

    var showLoading = function(on) {
        element.disabled = on
    }

    var onSuccess = function(data) {
        if (!data.errcode) {
            onLoaded(data)
            showLoading(false)        
        } else {
            showLoading(false)
            onLoadError(data)            
        }
    }


    var onAjaxError = function(xhr, status){
        showLoading(false)
        var errinfo = { errcode: status }
        if (xhr.status != 200) {
            // может быть статус 200, а ошибка
            // из-за некорректного JSON
            errinfo.message = xhr.statusText
        } else {
            errinfo.message = 'Некорректные данные с сервера'
        }
        onLoadError(errinfo)
    }


    return {
        load: function(url) {
            showLoading(true)
            while (element.firstChild) {
                element.removeChild(element.firstChild)
            }
		element.options[0] = new Option("Выберите город", -1)
		setTimeout( function(){element.options[0].selected=true;}, 1 );
		element.options[0].disabled=true;

            $.ajax({
                url: url,
                dataType: "json",
                success: onSuccess,
                error: onAjaxError,
                cache: false
            })
        }
    }
}

На самой странице где будет проводится выборка стран и городов прописываем мужду тегами <head></head>

<script type="text/javascript">
$(document).ready(function() {
    var select = ajaxSelect("u_city");

document.getElementById(\'u_country_sel\').onchange =
	       function() {select.load(\'http://xxxxxx.xx/city.php?country_id=\'+this.options[this.selectedIndex].value)}

});
</script>

Ну соответственно добавляем элементы select в ваш HTML код

<tr><td><b>Страна / Город: </b></td><td> '.$country_list.' <select name="u_city" style="width:200px;" id="u_city"><option value="-1" select disabled>Выберите город</option></select></td><tr>

В $country_list генерируется список стран, этот список не большой в отличии от городов по этому его можно подгрузить сразу без JS

$sql = "SELECT * FROM i_country ORDER BY name ASC";
$mq = mysql_query($sql, $mysql_link);
$country_list = '<select name="u_country" id="u_country_sel" style="width:195px;">'."\n";

while ($p = mysql_fetch_array($mq))
	{
	$country_list .= '<option value="'.$p[country_id].'">'.$p[name].'</option>'."\n";
	}
$country_list .= '</select>';

Edited August 13, 2011 by Rix