AJAX Suggestions search box / PHP/MySqlNapravih jednu mini skripticu za auto suggest na textboxu za pretragu.
Sve sto ta skripta radi jeste da mi ispod textboxa izbaci listu pojmova koji sadrze ukucanu rec. E sad, moj cilj je bio da napravim skriptu neku slicnu kao npr na Google ili Amazonu. Jer kod mene ne moze da se ide strelicama gore dole kroz suggestions jer je to samo jedan <div id="deo"></div>. evo da ne bunim ni vas ni mene:
imam jednu formu na stranici
Code:
<form method="post">
<input name="keyword" type="text" id="keyword" value="" onkeyup="showHint(this.value)" />
<input class="button" type="submit" name="Search" value="Trazi" />
<span id="txtHint"></span>
</form>
<form method="post">
<input name="keyword" type="text" id="keyword" value="" onkeyup="showHint(this.value)" />
<input class="button" type="submit" name="Search" value="Trazi" />
<span id="txtHint"></span>
</form>
iznad toga mi se nalazi javascript:
Code:
<script type="text/javascript" >
var xmlHttp;
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="plugins/content/livesearch.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function setPresetValue(clazz)
{
var classField = document.getElementById("keyword");
classField.value = clazz;
classField.focus();
}
</script>
<script type="text/javascript" >
var xmlHttp;
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="plugins/content/livesearch.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function setPresetValue(clazz)
{
var classField = document.getElementById("keyword");
classField.value = clazz;
classField.focus();
}
</script>
kao sto vidite java script poziva php stranicu livesearch.php u kojoj se nalazi sledece:
Code:
$select_info = "SELECT product_sales as sales, product_name FROM product WHERE product_sales > 0 ORDER BY sales DESC, product_name ";
$select_info_rez=mysql_query($select_info) or die("Greska: ".mysql_error());
$select_info_broj=mysql_num_rows($select_info_rez);
if($select_info_broj)
{
$a="";
$r=0;
while($select_info_broj>$r)
{
$naziv_art=mysql_result($select_info_rez,$r,'product_name');
$a[]=$naziv_art;
$b[]='<a href=# onclick="setPresetValue('.$naziv_art.');">';
$r++;
}
}
//get the q parameter from URL
$q=$_GET["q"];
echo '<ul>';
//lookup all hints from array if length of q>0
if (strlen($q) > 2)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))) || strstr($a[$i],$q))
{
if ($hint=="")
{
$hint=$b[$i].$a[$i]."</a>";
}
else
{
$hint=$hint.$b[$i].$a[$i]."</a>";
}
}
}
}
if ($hint !== "")
{
$response=$hint;
}
//output the response
echo "<li>".$response."</li>";
echo "</ul>";
$select_info = "SELECT product_sales as sales, product_name FROM product WHERE product_sales > 0 ORDER BY sales DESC, product_name ";
$select_info_rez=mysql_query($select_info) or die("Greska: ".mysql_error());
$select_info_broj=mysql_num_rows($select_info_rez);
if($select_info_broj)
{
$a="";
$r=0;
while($select_info_broj>$r)
{
$naziv_art=mysql_result($select_info_rez,$r,'product_name');
$a[]=$naziv_art;
$b[]='<a href=# onclick="setPresetValue('.$naziv_art.');">';
$r++;
}
}
//get the q parameter from URL
$q=$_GET["q"];
echo '<ul>';
//lookup all hints from array if length of q>0
if (strlen($q) > 2)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))) || strstr($a[$i],$q))
{
if ($hint=="")
{
$hint=$b[$i].$a[$i]."</a>";
}
else
{
$hint=$hint.$b[$i].$a[$i]."</a>";
}
}
}
}
if ($hint !== "")
{
$response=$hint;
}
//output the response
echo "<li>".$response."</li>";
echo "</ul>";
i sve on lepo izbacuje rezultate(suggestions) ali kad kliknem na neki rezultat trebalo bi da to sto sam kliknula upise u textbox, a nista se ne desi. Takodje me zanima kako da napravim efekat dropdown liste, da mogu strelicama na tastaturi izabrati zeljeni rezultat/predlog/suggestion?
Hvala!
Listen very carefully, I shall say this only once!
