Hej!
Surfade runt lite på minhembio.com och såg att i forument så kunde man skriva in sökord och sökning gjordes utan att man behövde submitta datat. Det hela skedde sas i realtid.
Hur gör man något sådant?
Använder asp/html
//Henrik
Skapa sökning utan submitknapp
11 svar · 748 visningar · startad av devotion
Sökningen på minhembio är gjort med så kallad Ajax. Det finns visserligen ingen "submit"-knapp, men det finns Javascript-kod som gör en "submit" till servern efter varje inmatning av en bokstav i sökrutan. Tack vare "Ajax" så behöver de inte ladda om hela sidan, utan de kan uppdatera bara vissa delar av webbsidan. En kort into till Ajax finns på:
http://internetworld.idg.se/webbstudio/pub/artikel.asp?id=326
Weee!
Ska bara fika, sen ska jag titta vidare i koden....
Finns nog anledning att återkomma! ;)
Mvh
Henrik
Prova med: http://www.w3schools.com/ajax/default.asp det ser ut att använda ASP. Det finns säkert fler/bättre om det är något speciellt du tänkt implementera.
har tittat lite på din kod Peter S och den ser ju fin ut... Men hur gör amn för att bara få med ett sökfält. och sedan vore det ju finta tt få sökresultatet på samma sida...
//Henrik
Även i ovanstående exempel visas sökresultatet på samma sida.
Söksidan:
<script type"text/javascript">
function getReq(){
return typeof(ActiveXObject) == "function" ?
new ActiveXObject("Microsoft.XMLHTTP") :
typeof(XMLHttpRequest) != "undefined" ? new XMLHttpRequest() : null;
}
function doSearch(val){
// only search if value > 2
if (val.replace(/^\s+|\s+$/g, "").length < 3){
document.getElementById("searchResult").innerHTML = "";
return;
}
var req = getReq();
if (req){
req.open("GET", "process.asp?search=" + val, true);
req.onreadystatechange = function(){
if (req.readyState == 4){
parseAndUpdate(req);
}
}
req.send(null);
}
}
function parseAndUpdate(rt){
document.getElementById("searchResult").innerHTML = rt.responseText;
}
</script>
<form>
Sök <input name="search" onkeyup="doSearch(this.value)">
</form>
<div id="searchResult"></div>
process.asp med en Access-databas med en tabell test och kolumner id,title,searchField (kass tabelldesign, men det är som sagt bara ett exempel)
<%
dim rq
rq = replace(request.querystring("search"),"'","''")
if len(rq) > 0 then
dim sql
sql = "select id, title, searchField from test where searchField like '%" & rq & "%'"
dim conn, rs
set conn = server.createobject("adodb.connection")
set rs = server.createobject("adodb.recordset")
conn.open "provider=microsoft.jet.oledb.4.0; data source=" & server.mappath("foobar.mdb")
rs.open sql, conn
if not rs.eof then
do while not rs.eof
response.write rs("id") & " - " & rs("title") & " - " & rs("searchField") & "<br>"
rs.movenext
loop
end if
rs.close
set rs = nothing
conn.close
set conn = nothing
end if
%>