AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

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

После ввода первых 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 = mysql_fetch_array($res)){
	$r=($row['area']?'area':'country');
	echo "<option value='" . $row['name'] . "'>" . $row['name']."
		(".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 type="text/javascript"><!--
    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=windows-1251;");

        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>

Заполненная база данных со всеми таблицами доступна платно.


.

© Copyright 2008-2016 by KDG