Реклама - здесь может быть Ваша реклама, которую увидят 4000+ человек в сутки. Хотите 1000 посетителей на свой сайт за 50 копеек?

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

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

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

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

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

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

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

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


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

if(!isset($_GET['city'])){
}elseif(empty($_GET['city'])) die('пусто');
else{
   $city=trim(urldecode($_GET['city']));
   $city1=@iconv("UTF-8", "windows-1251//IGNORE",$city); // все AJAX запросы приходят в Юникоде
   if($city1)$city=$city1;  // на случай если на Windows-машине
   $city=addslashes($city);
   $res = 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";
        }
   mysql_close();
   die;    
}
?>

Скопировать в буфер

Исходный код этого примера:

<form ONSUBMIT="alert('Выбран '+ot);return false;">
<p><b>Введите город:</b>
<input id="city" name="c" 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.submit()'>
</select>
</form>

<script LANGUAGE="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', '/ajax/example/city.php?city='+ot, '','','');
   o.style.visibility='visible';
}
getObj('city').focus();
//-->
</script>
Скопировать в буфер

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

- Одноканальный, интернет магазин автомобильный видеорегистратор купить.