Будьте добры подскажите, как создать Выпадающий список при помощи 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;}
|
|