VPF::Выпадающий список при помощи AJAX

klesh1504

Дата 31.3.2010, 21:12 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 28.3.2010

Репутация: нет
Всего: нет

Будьте добры подскажите, как создать Выпадающий список при помощи AJAX , как например в google. где приводятся несколько вариантов в поле и ты можешь выбрать один.
Заготовки уже есть, только не знаю как их связать вместе:

Код


fint.html:
<html>
<head>
<script src="chint.js"></script>
</head>
<body>
<form>
First Name:
<input type="text"id="txt1" onkeyup="showHint(this.value)">
</form>
<p>Suggestions:<span id="txtHint"></span></p>
</body>
</html>

Код


ghint.php:

<?php
header("Cache-Control: no-cache, must-revalidate");

header("Expires: Mon, 1 Sep 2009 07:30:00 GMT");

$a[]="Audi";
$a[]="BMW";
$a[]="Buick";
$a[]="Chevrolet";
$a[]="Citroen";
$a[]="Dodge";
$a[]="Ferrari";
$a[]="Fiat";
$a[]="Ford";
$a[]="Honda";
$a[]="Hyundai";
$a[]="Cherokee";
$a[]="Cherry";
$a[]="Lada";
$a[]="Lamborghini";
$a[]="Lincoln";
$a[]="Mazda";
$a[]="Mercedes";
$a[]="Mitsubishi";
$a[]="Nissan";
$a[]="Opel";
$a[]="Peugeot";
$a[]="Plymoth";
$a[]="Pontiac";
$a[]="Renault";
$a[]="Rover";
$a[]="Saab";
$a[]="Subaru";
$a[]="Suzuki";
$a[]="Toyota";
$a[]="Volkswagen";
$a[]="Volvo";

$q = $_GET["q"];

if (strlen($q) > 0)
{
$hint = "chint.js";
for($i = 0; $i<count($a); $i++)
{
if (strtolower($q) == strtolower(substr($a[$i],0,strlen

($q))))
{
if ($hint == "chint.js")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}

if ($hint == "chint.js")
{
$response = "no suggestion";
}
else
{
$response = $hint;
}

echo $response;
?>

Код


chint.js

var xmlHttp=null;
function showHint(str)
{
if(str.length==0)
{document.getElementById("txtHint").innerHTML="fint.html";
return;
}
xmlHttp=GetXmlHttpObject();
if(xmlHttp==null)
{
alert("Your browser does not support AJAX!")
return;
}
var url="ghint.php"
url=url+"?q="+str;
url=url+"&sid="+Math.random();
alert(url);
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if(xmlHttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{

try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")
}
catch(e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;}

Это сообщение отредактировал(а) klesh1504 - 2.4.2010, 13:20

EmilRegis

Дата 1.4.2010, 05:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 306
Регистрация: 21.9.2007

Репутация: 3
Всего: 4

Можно использовать давно написанную библиотеку jquery.autocomplete.js
Если не хочется прикручиваать фреймворк, то последовательность действий простая
1. на onkeyup вешается функция, ajax-ом отправляющая запрос на сервер
2. на сервере ищутся соответствия и присылаются на клиент например в формате json
3. на клиенте рисуется див, содержащий то, что пришло от сервера..

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »