Eli pitäisi saada monta JS -koodia samalle sivulle. Tarvitsen noita koodeja ennakoivaan noissa tekstikentissä. Miten tuon voi toteuttaa?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SearchField</title>
<meta name="description" content="SearchField example">
</meta>
<!-- paste this code into your webpage -->
<link href="searchfield/searchfield.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://xxxxxxx/js/searchfield/searchfield_junat.js"></script>
<!-- end -->
<script src="/mint/mint_v129/?js" type="text/javascript"></script>
<style>
body {
margin:0;
padding:0;
background:#006e89 url(back.gif) repeat-x;
font:90% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
text-align:left;
}
a {
text-decoration:none;
color:#8BB544;
}
a:hover {
text-decoration:none;
color:#999;
}
h1 {
font-size:220%;
margin:0 20px;
padding-top:1em;
line-height:1em;
color:#8bb544;
font-weight:normal;
}
h2 {
font-size:170%;
color:#8bb544;
font-weight:normal;
}
p.info {
margin:0 20px;
font-size:110%;
color:#999;
}
p.floater{
margin:0;
position:absolute;
top:2em;
right:20px;
float:left;
line-height:2em;
height:2em;
font-size:120%;
font-weight:bold;
}
p.floater a{
float:left;
line-height:2em;
height:2em;
padding:0 20px;
background:#8bb544;
color:#fff;
}
p.floater a:hover{
background:#4a98af;
color:#fff;
}
code {
font-size:110%;
}
pre {
margin:1em 0;
padding:1em 20px;
line-height:150%;
background:#e5f1f4;
border-left:1px solid #a4d5e4;
}
#container {
margin:2em;
width:650px;
background:#fff;
padding-bottom:20px;
text-align:left;
position:relative;
}
#content {
margin:0 20px;
}
p.more{
font-size:120%;
}
p.more a{
font-weight:bold;
}
p.sig {
padding:0 2em;
text-align:left;
color:#fff;
}
form{
margin:1em 0;
padding:0;
width:368px;
height:185px;
background:url(form_back.gif) no-repeat 0 0;
}
form p{
margin:0 40px;
}
form input{
margin-top:80px;
width:200px;
border:none;
padding:3px;
font-size:110%;
vertical-align:middle;
}
form button{
margin-top:80px;
margin-left:10px;
width:53px;
height:30px;
border:none;
text-indent:-8000px;
overflow:hidden;
background:url(button.gif) no-repeat 0 0;
cursor:pointer;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="container">
<h1>Kalustotunnisteet</h1>
<p class="floater">Rautatiekalusto</p>
<div id="content">
<form id="searchform" action="" method="post">
<p><input type="text" id="searchfield" name="searchfield" value="" />
<!--<button type="submit" id="searcbutton">Go</button>--></p>
</form>
</div>
</div>
<!-- paste this code into your webpage -->
<link href="searchfield/searchfield.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://xxxxxxx/js/searchfield/searchfield_operaattorit.js">
</script>
<!-- end -->
<div id="container">
<h1>Kalustotunnisteet</h1>
<p class="floater">Rautatiekalusto</p>
<div id="content">
<form id="searchform" action="" method="post">
<p><input type="text" id="searchfield" name="searchfield" value="" />
<!--<button type="submit" id="searcbutton">Go</button>--></p>
</form>
</div>
</div>
</body>
</html>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-783567-1";
urchinTracker();
</script>Et voi liittää tuolla tavalla samaa JS-koodia montaa kertaa samalle sivulle. Jos haluat ennakoivan syötön moneen kenttään, täytyy JS-koodista tehdä montaa kenttää tukeva. Siinä auttaisi, että laittaisit searchfield_operaattorit.js-tiedoston näkyville.
/*
SearchField
written by Alen Grakalic, provided by Css Globe (cssglobe.com)
please visit http://cssglobe.com/post/1202/style-your-websites-search-field-with-jscss/ for more info
*/
this.searchfield = function(){
// CONFIG
// this is id of the search field you want to add this script to.
// You can use your own id just make sure that it matches the search field in your html file.
var id = "searchfield";
// Text you want to set as a default value of your search field.
var defaultText = "Kirjoita sarjatunnus";
// set to either true or false
// when set to true it will generate search suggestions list for search field based on content of variable below
var suggestion = true;
// static list of suggestion options, separated by comma
// replace with your own
var suggestionText = "Sm1, Sm2, Sm3, Sm4, Sm5, Sm6, Dm12, Sr1, Sr2, Chfy, Einy, Exy, Rky, Dv12, Dr14, Dr16, Ed, Edb, Edfs, Edm, Eds, Ex, Expt, Rx, Eil, Eilf, Hccmqqr, Gfot, A20, A40, A41, A42, A60, Nom, CEmt, EFit, EFiti, Ei, Ein, Eip, Eipt, Rbkt, Rk, Rkt, Hkb, Hkba, Hkbar, Kbp, Ob, Occ, Oc, Occ-y, Oav, Ocpp, Sp, Snpss, Rmm, Rmmn, Oa, Shmmn, Shmmn-t, Shmmns-tw, Elo-t, Obrk, Ohr, Fat, Fakks, Tabd, Tad, Ome, Taimn, Taimn-t, Sbmm, Sgn, Tabkk, Taimn-u, Tau, Uac, Gbln, Gbln-t, Gbls, Sim, Sim-u, Simn, Simn-t, Simn-u, Shimmn, Hai-t, Hain, Hai, Hbi, Hbikk, Hbin, Habbin, Sos, Zags, Za, Zac, Zan-v, Zans-v, Sonk, Zagkks-z, Sord, Sof, Sob, Soek, Soa, Soea, Sdm, Rbqss, Rbnqss, Rbnqss-y, Rbnqss-v, Sdggnqss-w, Sdggqss-w, Sgm, Sg-t, Lgjn, Osg, Vgk, Vok, Vo, Vof/Vofa, Vggk, Vgkak, Vgobo, Vtad, Vosk";
// END CONFIG (do not edit below this line, well unless you really, really want to change something :) )
// Peace,
// Alen
var field = document.getElementById(id);
var classInactive = "sf_inactive";
var classActive = "sf_active";
var classText = "sf_text";
var classSuggestion = "sf_suggestion";
this.safari = ((parseInt(navigator.productSub)>=20020000)&&(navigator.vendor.indexOf("Apple Computer")!=-1));
if(field && !safari){
field.value = defaultText;
field.c = field.className;
field.className = field.c + " " + classInactive;
field.onfocus = function(){
this.className = this.c + " " + classActive;
this.value = (this.value == "" || this.value == defaultText) ? "" : this.value;
};
field.onblur = function(){
this.className = (this.value != "" && this.value != defaultText) ? this.c + " " + classText : this.c + " " + classInactive;
this.value = (this.value != "" && this.value != defaultText) ? this.value : defaultText;
clearList();
};
if (suggestion){
var selectedIndex = 0;
field.setAttribute("autocomplete", "off");
var div = document.createElement("div");
var list = document.createElement("ul");
list.style.display = "none";
div.className = classSuggestion;
list.style.width = field.offsetWidth + "px";
div.appendChild(list);
field.parentNode.appendChild(div);
field.onkeypress = function(e){
var key = getKeyCode(e);
if(key == 13){ // enter
selectList();
selectedIndex = 0;
return false;
};
};
field.onkeyup = function(e){
var key = getKeyCode(e);
switch(key){
case 13:
return false;
break;
case 27: // esc
field.value = "";
selectedIndex = 0;
clearList();
break;
case 38: // up
navList("up");
break;
case 40: // down
navList("down");
break;
default:
startList();
break;
};
};
this.startList = function(){
var arr = getListItems(field.value);
if(field.value.length > 0){
createList(arr);
} else {
clearList();
};
};
this.getListItems = function(value){
var arr = new Array();
var src = suggestionText;
var src = src.replace(/, /g, ",");
var arrSrc = src.split(",");
for(i=0;i<arrSrc.length;i++){
if(arrSrc[i].substring(0,value.length).toLowerCase() == value.toLowerCase()){
arr.push(arrSrc[i]);
};
};
return arr;
};
this.createList = function(arr){
resetList();
if(arr.length > 0) {
for(i=0;i<arr.length;i++){
li = document.createElement("li");
a = document.createElement("a");
a.href = "javascript:void(0);";
a.i = i+1;
a.innerHTML = arr[i];
li.i = i+1;
li.onmouseover = function(){
navListItem(this.i);
};
a.onmousedown = function(){
selectedIndex = this.i;
selectList(this.i);
return false;
};
li.appendChild(a);
list.setAttribute("tabindex", "-1");
list.appendChild(li);
};
list.style.display = "block";
} else {
clearList();
};
};
this.resetList = function(){
var li = list.getElementsByTagName("li");
var len = li.length;
for(var i=0;i<len;i++){
list.removeChild(li[0]);
};
};
this.navList = function(dir){
selectedIndex += (dir == "down") ? 1 : -1;
li = list.getElementsByTagName("li");
if (selectedIndex < 1) selectedIndex = li.length;
if (selectedIndex > li.length) selectedIndex = 1;
navListItem(selectedIndex);
};
this.navListItem = function(index){
selectedIndex = index;
li = list.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].className = (i==(selectedIndex-1)) ? "selected" : "";
};
};
this.selectList = function(){
li = list.getElementsByTagName("li");
a = li[selectedIndex-1].getElementsByTagName("a")[0];
field.value = a.innerHTML;
clearList();
};
};
};
this.clearList = function(){
if(list){
list.style.display = "none";
selectedIndex = 0;
};
};
this.getKeyCode = function(e){
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
return code;
};
};
// script initiates on page load.
this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",searchfield);Helpoin tapa saada koodi toimimaan kahdella tekstikentällä on laittaa molemmille tekstikentille oma id, vaikka searchfield ja searchfield2, tallentaa tuo sama koodi kahteen tiedostoon ja korvata toisesta tiedostosta searchfield searchfield2:lla.
Kyseinen ratkaisu on kyllä melkoinen purkkaviritys; oikea tapa toteuttaa tuo olisi muokata JS-koodia niin, että se tukee useampaa tekstikenttää suoraan, mutta ainakaan minä en jaksa sitä nyt tehdä.
Aihe on jo aika vanha, joten et voi enää vastata siihen.