voigtan
Roosweb
LP_MAXI
chrillemeterAjax sökfunktion
Nu ska vi göra en sökfunktion i ajax som uppdaterar sökningen för varje bokstav du skriver.
Jag antar att du har lite koll på Ajax och Javascript och ganska bra koll på ASP, om du inte har det läs på lite om det först.
Vi börjar med Ajaxen och lite Javascript.
var xmlHttp
function makeRequest(page,div){
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null){
alert ("Webbläsaren stödker inte HTTP-Begärningar.") // Webbläsaren stödjer inte funktionen
return
}
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET", page +"searchWord="+ document.getElementById("searchWord").value + "&rnd="+ Math.random() ,true)// Här fyller vi i vilken sida som ska hämtas
xmlHttp.send(null)
}
function stateChanged() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById(div).innerHTML=xmlHttp.responseText; // Om allt har laddat klart så får vi innehållet på sidan som hämtades
} else
{
document.getElementById(div).innerHTML="Söker efter "+ document.getElementById("searchWord").value +"..."; // Annars får vi denna texten
}
}
function GetXmlHttpObject(){
var objXMLHttp=null
if (window.XMLHttpRequest){
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject){
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
function showSearch(id) {
if(document.getElementById(id).style.display == 'none') // Visar/Döljer diven beroende på om den visas eller döljs
{
document.getElementById(id).style.display = '';
}
else {
document.getElementById(id).style.display = 'none';
}
}
Och nu gör vi formuläret och diven som innehållet ska visas i, vi gör även anropet till Ajaxkoden så att vi för nått resultat.
<form name="searchForm">
<input type="text" name="searchWord" onKeyUp="makeRequest('search.asp','searchDiv'); showSearch('searchDiv');" /><br />
</form>
<div id="searchDiv" style="display:none;"></div>
Vad gjorde vi nu då?
Ja allt förutom "makeRequest('search.asp','searchDiv'); showSearch('searchDiv');" var ju vanlig (x)HTML.
makeRequest() gör så att vi anropar Ajaxfunktionen som hämtar sidan search.asp till diven searchDiv.
showSearch() gör så att vi ser diven som sökresultatet hamnar i detta för att det ska bli lite roligare och snyggare.
Nu går vi in på ASP-koden, vi döper sidan till search.asp.
<%
function Swe(strText)
strText = Replace(strText, "å", "å")
strText = Replace(strText, "Å", "Å")
strText = Replace(strText, "ä", "ä")
strText = Replace(strText, "Ä", "Ä")
strText = Replace(strText, "ö", "ö")
strText = Replace(strText, "Ö", "Ö")
Response.Write(strText)
End function
Set Connect = Server.CreateObject("ADODB.Connection")
Connect.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("databas.mdb")
%>
<b><span style="font-size:15px;">Du sökte efter <%=Swe(Request.Querystring("searchWord")) %>...</span></b>
<br />
<br />
<b><span style="font-size:13px;">Blogginlägg</span></b>
<hr style="height:1px; color:#000000;" />
<%
strSQL="SELECT * FROM tblText where fldText Like '%"& Request.Querystring("searchWord") &"%' Order by fldText ASC"
Set objRS = Connect.Execute(strSQL)
If objRS.EOF Then
Response.Write("Inget resultat...<br />")
End If
Do Until objRS.EOF
%>
<%=Swe(objRS("fldText"))%><br />
<%
objRS.MoveNext
Loop
Connect.Close : Set Connect = Nothing
%>
Nu hämtade vi alla poster i databasen som liknade det vi sökte på, om ni inte vet hur det fungerar med Like kolla i Tips & Trix på AspKoll.se.
Nu har vi allt för att göra en sökfunktion i Ajax till din webbplats, nu är det upp till dig att sätta ihop de olika delarna också...
Det är itne säkert att koden fungerar korrekt men om ni hittar fel rapportera dem gjärna till mig...
Skapades: 2007-09-17 23:25:33
Skribent: edvinlinden
Lästs 2750 gånger
Betyg: 8 (artikeln har endast 4 röster, det krävs minst 5 för ett betyg)
Kommentarer
nim sa den 2 oktober 2007 kl 16:33:Tastade din kod, men jag får hela tiden "div is undefined".. Jag är inte så bra på det här med ajax, så jag vet inte ritkigt vad jag ska göra för att att rätta till det.
Jag får så fort jag skriver in något "The page cannot be found" i sökresultatet. har lagt all kod på samma sida, kanske man inte skulle? jag fattar inte riktigt hur det funkar, vilken sida är det som den inte hitta?