/    Sign up×
Community /Pin to ProfileBookmark

search box with history

Copy linkTweet thisAlerts:
Sep 17.2007

hi
to do a search box with hisory.

example:
im writing in the search box with the id “searchbox”, and if im writing something and then pressing enter, this word i wroteand all the other words i ever wrote in this txt box will show in an alphabetic settle when pressing the little arrow near the search box.
thx a lot!!!

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsSep 17.2007 — [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#AllWords {
position:relative;overflow:auto;width:100px;height:100px;border:solid black 1px;
}

/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcEnter(zxcs,zxca){
zxcs=document.getElementById(zxcs);
zxca=document.getElementById(zxca);
zxcclds=zxca.childNodes;
if (zxcs.value.length<1) return;
for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
if (zxcclds[zxc0].firstChild.data==zxcs.value) return;
}
zxcES('DIV',{paddingLeft:'5px'},zxca,zxcs.value);
var zxcary=[];
for (var zxc0=0;zxc0<zxcclds.length;zxc0++) zxcary.push(zxcclds[zxc0]);
zxcary=zxcary.sort(zxcSortDivs);
for (var zxc1=0;zxc1<zxcary.length;zxc1++) zxca.appendChild(zxcary[zxc1]);
}

function zxcSortDivs(zxca,zxcb){
var zxcaa=zxca.firstChild.data;
var zxcbb=zxcb.firstChild.data;
if (zxcaa<zxcbb) return -1;
if (zxcaa>zxcbb) return 1;
return 0;
}
function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}
/*]]>*/
</script></head>

<body>
<input id="Search" type="text" />
<input type="button" name="" value="Enter" onclick="zxcEnter('Search','AllWords')"/>
<div id="AllWords" ></div>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@arnoniauthorSep 17.2007 — thx dude you are the best!!!!!!!!!!!!
Copy linkTweet thisAlerts:
@arnoniauthorSep 17.2007 — but how to do that the history will stay even im closing the window?
Copy linkTweet thisAlerts:
@Angry_Black_ManSep 17.2007 — you would have to create a cookie to store the search information. you would append the cookie each time someone enters a term, and you would read from it when a page is reloaded to determine their old search terms.

its not complicated, but it will take a good amount of work to get the above script to work with the tutorial below:

http://www.quirksmode.org/js/cookies.html
Copy linkTweet thisAlerts:
@vwphillipsSep 17.2007 — [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#AllWords {
position:relative;overflow:auto;width:100px;height:100px;border:solid black 1px;
}

/*]]>*/
</style>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcEnter(zxcs,zxca){
zxcs=document.getElementById(zxcs);
zxca=document.getElementById(zxca);
zxcclds=zxca.childNodes;
if (zxcs.value.length<1) return;
for (var zxc0=0;zxc0<zxcclds.length;zxc0++){
if (zxcclds[zxc0].firstChild.data==zxcs.value) return;
}
zxcES('DIV',{paddingLeft:'5px'},zxca,zxcs.value);
var zxcary=[];
for (var zxc0=0;zxc0<zxcclds.length;zxc0++) zxcary.push(zxcclds[zxc0]);
zxcary=zxcary.sort(zxcSortDivs);
var zxcvalue='';
for (var zxc1=0;zxc1<zxcary.length;zxc1++){
zxca.appendChild(zxcary[zxc1]);
zxcvalue+=zxcary[zxc1].firstChild.data+':';
}
zxcSetCookie(zxcvalue)
}

function zxcSortDivs(zxca,zxcb){
var zxcaa=zxca.firstChild.data;
var zxcbb=zxcb.firstChild.data;
if (zxcaa<zxcbb) return -1;
if (zxcaa>zxcbb) return 1;
return 0;
}

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}
/*]]>*/
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// Functional Code - NO NEED to Change
var zxcCookie='fred';

var zxcDays=1;

var zxcExp=new Date(new Date().getTime()+zxcDays*86400000).toGMTString();


function zxcSetCookie(zxcvalue){
document.cookie=zxcCookie+'='+escape(zxcvalue)+';expires='+zxcExp+';path=/;';
}

function zxcGetCookieValue(zxcid){
var zxcval=zxcGetCookie(zxcCookie);
if(!zxcval){ return; }
zxcval=zxcval.split(':');
for (var zxc0=0;zxc0<zxcval.length-1;zxc0++) zxcES('DIV',{paddingLeft:'5px'},document.getElementById(zxcid),zxcval[zxc0]);
}

function zxcGetCookie(zxcnme) {
var zxcst=document.cookie.indexOf(zxcnme+"=");
var zxclen=zxcst+zxcnme.length+1;
if ((!zxcst)&&(zxcnme != document.cookie.substring(0,zxcnme.length))) return null;
if (zxcst==-1) return null;
var zxcend=document.cookie.indexOf(";",zxclen);
if (zxcend==-1) zxcend=document.cookie.length;
return unescape(document.cookie.substring(zxclen,zxcend));
}


/*]]>*/
</script>
</head>

<body onload="zxcGetCookieValue('AllWords');">
<input id="Search" type="text" />
<input type="button" name="" value="Enter" onclick="zxcEnter('Search','AllWords')"/>
<div id="AllWords" ></div>
</body>

</html>[/CODE]
×

Success!

Help @arnoni spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...