Список городов по начальным буквам

После ввода первых 3-х букв названия города осуществляет ассинхронный поиск в базе данных и выдает список населенных пунктов, начинающихся с введенных букв.

Список ограничен первыми найденными 5-ю городами. Вы можете продолжить ввод, при этом список будет сокращаться, в нем будут оставаться только города, которые начинаются с введенных букв, или выбрать с помощью мышки или клавиатуры город из списка.

В выпадающем списке выбрать город можно с помощью клавиши Enter или с помощью двойного клика мышкой. При движении по списку с помощью стрелок вверх/вниз или одиночными нажатиями клавиши мыши на элементе списка, в поле ввода подставляется выбранный город, при этом переход не осуществляется и список не обновляется.

В поле ввода input параметр AUTOCOMPLETE="OFF" запрещает браузеру выводить свои подсказки с ранее выбранными городами.

Выпадающий список позиционируется относительно элемента ввода. При поиске не учитывается регистр вводимых букв.

Пример должен работать во всех браузерах. Посмотрите другой пример выбора города.

Система использует общую базу с примером определения города по ip и выбора страна, регион, город и с примером определения региона по номеру телефона.

Исходный код примера (php-код, выполняемый на стороне сервера):

<?
// пример строит список городов по начальным буквам и выбирает из него
require_once($_SERVER['DOCUMENT_ROOT'].'/config.php');

if(!isset($_GET['city_name'])){
}elseif(empty($_GET['city_name'])) die('пусто');
else{
   $city=trim(urldecode($_GET['city_name']));
   $city1=@iconv("UTF-8", "windows-1251//IGNORE",$city); // все AJAX запросы приходят в Юникоде
   if($city1)$city=$city1;  // на случай если на Windows-машине
   $city=addslashes($city);
   $res = DB::sql('SELECT * FROM '.db_prefix.'city WHERE LOWER(name)
        LIKE CONCAT("'.strtolower($city).'","%") LIMIT 5');
   while($row = DB::fetch_assoc(res)){
    $r=($row['area']?'area':'country');
    echo "<option value='" . $row['name'] . "'>" . $row['name']."
        (".DB::GetName($r,intval($row[$r])).")</option>\n";
        }
   die;
}
?>

HTML+javascript код:

<form onsubmit="alert('Выбран город с кодом '+getObj('city').value);return false;">
    <p><b>Введите город:</b>
        <input id="city" name="city" size="30" autocomplete="OFF" onkeyup='PressKey(event)' /><br>
        <select id="info" size=5 style='visibility:hidden;position:absolute;z-index:999;'
                onchange="getObj('city').value=ot=this.options[this.selectedIndex].value"
                onkeyup='PressKey2(event)' ondblclick='this.form.onsubmit()'>
        </select>
</form>

<script>
    var ot="", timer=0, x=-1,y=0;
    //g=getObj('city').onkeyup=PressKey; // альтернативный вариант назначения обработчика


    function PressKey2(e){ // вызывается при нажатии клавиши в select
        e=e||window.event;
        t=(window.event) ? window.event.srcElement : e.currentTarget; // объект для которого вызывно
        if(e.keyCode==13){ // Enter
            t=(window.event) ? window.event.srcElement : e.currentTarget; // объект для которого вызывно
            t.form.onsubmit();
            return;}
        if(e.keyCode==38&&t.selectedIndex==0){ // Up
            getObj('city').focus();
            getObj('info').style.visibility = 'hidden'; // спрячем select
        }
    }
    // Определение координаты элемента
    function pageX(elem) {
        return elem.offsetParent ?
            elem.offsetLeft + pageX( elem.offsetParent ) :
            elem.offsetLeft;
    }
    function pageY(elem) {
        return elem.offsetParent ?
            elem.offsetTop + pageY( elem.offsetParent ) :
            elem.offsetTop;
    }

    function PressKey(e){
        e=e||window.event;
        t=(window.event) ? window.event.srcElement : e.currentTarget; // объект для которого вызвано
        g=getObj('info');
        if(x==-1&&y==0){// при первом обращении просчитываю координаты
            x=pageX(t); y=pageY(t);
            g.style.top = y + t.clientHeight+1 + "px";
            g.style.left = x + "px";
        }
        if(e.keyCode==40){g.focus();g.selectedIndex=0;return;}
        if(ot==t.value)return; // если ничего не изменилось не "замучить" сервер
        ot=t.value;
        if(timer){clearTimeout(timer);timer=0;}
        if(ot.length<3){
            getObj('info').style.visibility = 'hidden'; // спрячем select
            return;}
        timer=window.setTimeout('Load()',1000);  // загружаю через 1 секунду после последнего нажатия клавиши
    }

    function Load(){
        timer=0;
        o=getObj('info');
        o.options.length=0;
        ajaxLoad('info', '/geo/api.php?city_name='+ot, '','','');
        o.style.visibility='visible';
    }
    getObj('city').focus();

    function getObj(objID)
    {if (document.getElementById) {return document.getElementById(objID);}
    else if (document.all) {return document.all[objID];}
    else if (document.layers) {return document.layers[objID];}
    }

    function ajaxLoad(obj,url,defMessage,post,callback){
        var ajaxObj;
        if (defMessage) document.getElementById(obj).innerHTML=defMessage;
        if(window.XMLHttpRequest){
            ajaxObj = new XMLHttpRequest();
        } else if(window.ActiveXObject){
            ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            return;
        }
        ajaxObj.open ((post?'POST':'GET'), url);
        if (post&&ajaxObj.setRequestHeader)
            ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");

        ajaxObj.onreadystatechange = ajaxCallBack(obj,ajaxObj,(callback?callback:null));
        ajaxObj.send(post);
        return false;
    }

    function updateObj(obj, data, bold, blink){
        if(bold)data=data.bold();
        if(blink)data=data.blink();
        document.getElementById(obj).innerHTML = data; // упрощенный вариант, работает не во всех браузерах
    }

    function ajaxCallBack(obj, ajaxObj, callback){
        return function(){
            if(ajaxObj.readyState == 4){
                if(callback) if(!callback(obj,ajaxObj))return;
                if (ajaxObj.status==200)
                    updateObj(obj, ajaxObj.responseText);
                else updateObj(obj, ajaxObj.status+' '+ajaxObj.statusText,1,1);
            }
        }}
</script>

Заполненная база данных со всеми таблицами доступна платно. Также можно использовать наше API для выбора города