WN - Auto-complete problem

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Auto-complete problem (https://www.wn.se/forum/showthread.php?t=32509)

Hej, jag har implementerat en auto-complete grej till mitt projekt. När man skriver i formuläret hämtar den helt enkelt värden ur en databas och presenterar dynamiskt med hjälp av jQuery en lista på sådana sökningar nedan. Sedan när man klickar på en sådan tidigare sökning är det tänkt att formuläret ska fyllas i med dess innehåll. Koden jag har är:
function fill(thisValue) {
alert('test');
$('#inputString').val(thisValue);
$('#suggestions').hide();
}

Dock är alla sökningar i formen ämne(r1,r2,r3...) vilket tydligen skapar problem eftersom den tror att ämnet är en odefinierad funktion. Såhär säger firebug:
"etanol is not defined
[Break on this error] fill(etanol(R1, R2, S1, S2));"

Hur kan man fixa detta?

Tack

Det blir mycket lättare att hjälpa dig om du poster mera av din jQuery kod.

Inte för att jag har en aning om JQuery men är inte problemet att det handlar om en sträng som ska matas vidare till php/asp/perl (om jag förstått det hela rätt) - och i så fall är det väl bara ett par "-tecken som behövs på rätt ställe.

Okej, här är först min php-kod:

Kod:

while ($res = mysql_fetch_array($result)) {

 * *echo '<li onclick="fill('.$res[0].');">'. $res[0] .'</li>';

 * *}

Och här är min javascript/jQuery-funktion:

Kod:

function fill(thisValue) {

 * *$('#inputString').val(thisValue);

 * $('#suggestions').hide();

}

Jag kunde inte riktigt lura ut hur jag skulle lägga till ' ' ;/

Citat:

Originally posted by Althalos@Oct 14 2008, 23:33
Okej, här är först min php-kod:

Nu kanske jag bara irrar lite på senkvällen men vill du inte skriva:

Kod:

while ($res = mysql_fetch_array($result)) {

 * *echo "<li onclick=\"fill('".$res[0]."');\">". $res[0] .'</li>';

 * *}

(Lite svårt att se tecknen men förstora texten i din browser så ser du nog skillnaden.)

Edit: titta i källkoden så ser du att du skickar (vad som av javaskript bara kan uppfattas som) en funktion som argument till funktionen fill()

Javaskript är ju lite kul genom att även funktioner är argument (eller i princip en form av variabler) och kan skickas med precis som variabler till en en funktion.

Tack det fungerade. =)

Nu har jag ett nytt problem :S
http://riskanalysatorn.ekdahlproduction.com , där har ni vad jag jobbar på. Testa skriv t. ex. e i formuläret så får ni upp en lista på tidigare sökningar (etanol). Problemet är att det kommer att ligga bakom övriga divvar. Jag lyckades med negativt z-index få det att fungera i FF, men sedan fungerade ingenting i IE.

Ingenting jag läst om z-index har hjälpt mig att lösa detta. Har ni några tips?

Citat:

* {margin:0; padding:0;z-index:0;position:relative;text-align:left;}
* #content {min-height:500px;z-index:0;}
#container{width:701px;margin:0px auto 0px auto;z-index:0;}
#header {width:701px;height:105px;background-image:url(header.gif);}
#form {width:701px;height:39px;background-image:url(form.gif);}
#help {width:671px;height:11px;background-image:url(help.gif);font-size:8pt;font-family:Verdana,Helvetica,Sans-skrit;padding:15px 15px;position:relative;z-index:0;}
#menu {height:10px;width:701px;text-align:right;margin:5px auto 0px auto;}
.menulink {font-size:10pt;}
a:link {text-decoration:none;color:#0066FF;}
a:visited {text-decoration:none;color:#0066FF;}
a:hover {text-decoration:none;color:#00A000;}
.input {margin:10px 20px auto 20px; width:500px;}
.inputbutton {margin:10px 0px auto auto; width:150px;}
.suggestionsBox {z-index:100;position:relative;margin:0px 20px;width:500px;}
.suggestionList {z-index:100;margin: 0px;padding: 0px;width:500px;background-color:#DCDCDC;border: #9C9C9C 1px solid;}
li {margin: 0px 0px 3px 0px;padding: 3px;cursor: pointer;list-style-type:none;z-index:100;}
li:hover {background-color:#CCCCCC;z-index:100;}
#genbutton {display: block;width: 400px;height:100px;background-image:url('genbutton.png'); no-repeat 0 0;margin:0px auto 0px auto;z-index:0;}
#genbutton:hover{background-position: 0 -100px;}
#genbutton span{display: none;}

Är det inte lite väl drastiskt att sätta position: relative på alla element?

Annars är väl det rimliga att sätta en tillräckligt hög z-index på suggestionsBox…

Edit: för övrigt är inte Sans-skrit möjligt även om det är alla indo-europeiska språks ursprung… :D
Du menar nog sans-serif.

Edit II: du borde nog kolla lite noggrannare (eller validera din css) så att du inte bygger in några fel - de kan ha märkliga och oväntade effekter:

Citat:

background-image:url('genbutton.png'); no-repeat 0 0

ska väl vara:

Kod:

background:url(genbutton.png) no-repeat top left;

eller något liknande.

Tack för hjälpen. Det här är min förfinade kod:

Kod:

* {margin:0; padding:0;text-align:left;}

#content {min-height:500px;}

#container{width:701px;margin:0px auto 0px auto;}

#header {width:701px;height:105px;background-image:url(header.gif);}

#form {width:701px;height:39px;background-image:url(form.gif);}

#help {width:671px;height:11px;background-image:url(help.gif);font-size:8pt;font-family:Verdana,Helvetica,Sans-serif;padding:15px 15px;}

#menu {height:10px;width:701px;text-align:right;margin:5px auto 0px auto;}

.menulink {font-size:10pt;}

a:link {text-decoration:none;color:#0066FF;}

a:visited {text-decoration:none;color:#0066FF;}

a:hover {text-decoration:none;color:#00A000;}

.input {margin:10px 20px auto 20px; width:500px;}

.inputbutton {margin:10px 0px auto auto; width:150px;}

.suggestionsBox {z-index:100;margin:0px 20px;width:500px;}

.suggestionList {z-index:100;margin: 0px;padding: 0px;width:500px;background-color:#DCDCDC;border: #9C9C9C 1px solid;}

li {margin: 0px 0px 3px 0px;padding: 3px;cursor: pointer;list-style-type:none;z-index:100;}

li:hover {background-color:#CCCCCC;z-index:100;}

#genbutton {display: block;width: 400px;height:100px;background-image:url(genbutton.png); no-repeat 0 0;margin:0px auto 0px auto;}

#genbutton:hover{background-position: 0 -100px;}

#genbutton span{display: none;}

Men det fungerar fortfarande inte riktigt som det ska... allt som har med listan att göra har z-index:100; :S

För att z-index ska fungera så måste du positionera elementet på något sätt, exempelvis med relative eller absolute så att det "flyter" ovan sin normal position i dokumentstrukturen. Jag vet inte vad skriptet gör men annars kan du ju prova att sätta:

Kod:

.suggestionsBox {position: relative; top: 0px; left: 0px; z-index:100;margin:0px 20px;width:500px}

och skippa z-index på .suggestionList eftersom den följer normala regler i sin nya positionsomgivning.