search box suggesties zitten onder een andere div + breedte aanpassen?

Status
Niet open voor verdere reacties.
Example5

Example5

Terugkerende gebruiker
Lid geworden
9 mrt 2008
Berichten
2.172
beste...

ik probeer deze code te maken http://www.w3schools.com/php/php_ajax_livesearch.asp
ik heb hier een paar vragen over:

1. wanneer ik echter een div maak waarin ik die searchbox zet, en ik zet 50px lager nog een div, komen de suggesties (die verschijnen in de vorm van een drop down menu) onder die andere div te zitten. hoe kan ik zorgen dat deze suggesties 'always on top' zitten?

2. als ik een lange suggestie voor een zoekterm heb, bijv dddddddddddddddddddddddddddddddddddddddddddddddddd dan wordt deze heel erg breed en dus ook breder dan het boxje/div waarin de resultatie worden weergegeven. weet iemand hoe ik ervoor kan zorgen dat een regel die breder is dan de div automatisch wordt afgebroken of op de volgende regel verder gaat?

3. ik wil de searchbox een prefix meegeven dus een text die al automatisch in de zoekbox staan (bijv: zoals de helpmij zoekmachine, daar staat 'zoekopdracht') en wanneer men dus klik, verwdijnt deze tekst. ik kan door middel van een value wel een tekst automatisch in de box laten zetten, maar wanneer hierop geklikt wordt, verdwijnt deze niet. weet iemand hoe ik dat voor elkaar krijg?

alvast bedankt
 
Laatst bewerkt:
1. Met wat css magie: probeer position: relative (of absolute), en z-index. Overgens is het raar dat het onder de andere div komt, hoe ziet je CSS voor de 2e div eruit!?

2. Ook CSS: als je de breedte gewoon in px. neerzet, en een overflow:hidden gebruikt geloof ik.

3. Zoiets heet een placeholder. Je kan de HTML5 placeholder eens proberen, en als fallback een leuk Javascriptje gebruiken. Zie een voorbeeld op mn site.
 
bedankt voor je reactie, maar:

1. werkt niet. div ziet er als volgt uit:
Code: 
.links {
	background: #ffffff;
	height: 500px;
	width: 1035px;
	float: left;
    border-style:solid;
	border-width:1px;
	border-color:#CACAFF;

2. is reeds opgelost

3. die van je site doet het op een of andere manier niet op mijn site. aangezien de support voor html5 dramatisch is, laat ik het er maar even bij


heb je nog een suggestie voor punt 1? in mijn eerste post staat de link naar de code van de searchbox.
 
Laatst bewerkt:
okee, 1 doet het nu ook :) had de z-index omgedraaid.

nogmaals bedankt, weet je eventueel ook een iets minder omslachtige manier om die placeholder te maken, die code van jouw site lijkt niet te werken op de mijne.
 
weet je eventueel ook een iets minder omslachtige manier om die placeholder te maken
Klik om te vergroten...
Nee. En op welke manier is het omslachtig? Het Javascript (tenminste, het idee erachter) is de enige manier om zoiets te doen*.

Placeholder werkt al op Chromium-en Webkitbased browsers. Alleen IE en FF hebben het nog niet, maar FF4 en (weet niet zeker) IE9 ook. Zelfs op mn HTC Hero's browser werkt de placeholder!

Heb je toevallig het script in de <head> gezet? Het moet net voor de </body> tag neergezet worden. Zo niet, duw eens op ctrl+J, en check de foutmeldingen (onderaan is de laaste).



:thumb:


* - tenminste, ik kan nog zo 3 manier roepen, maar die zijn allemaal 1). omslachtiger of 2). meer moeite of 3). slechter qua web-idee.
 
ah ik had hem in de head staan, nu doet hij het wel :) hij draait trouwens prima op firefox hoor.

nog een ander vraagje waarmee je me hopelijk kunt helpen. in de zoekbox, als ik een lange lijst met namen heb die hetzelfde beginnen (bijv: piet1 piet2 .... piet100) krijg ik als ik 'pi' intyp een gigantische lijst. is er een manier om dit te limiteren tot 10 ofzo?

hopelijk kan je me hier ook mee helpen :D

bedankt zover
 
een limiter in je query opnemen limit(0,10) laat de eerst 10 zien.
 
ik zou om eerlijk te zijn niet eens weten waar ik die moet plaatsen? waar staat die query :$?
 
Even tussendoor:
nr.#6:
Ah ik had het script in de head staan, nu doet hij het wel. :) Hij draait trouwens prima op Firefox hoor.
Klik om te vergroten...
Jazeker, op Firefox 3.5 al, en ook op IE6 zelfs. *)
Maar alleen omdat ze moeten luisteren naar het ThatGuy javascriptje. :P
Bewijs zelf geleverd: script niet in de head > doettutniet. ;)

_________
*) IE6 zegt als breedbekkikker met zuinig mondje: "HTML5? Nóóóóit van gehoord."
 
Laatst bewerkt:
lol csshunter.

nog een suggestie voor de limiter iemand (zie mijn vorige post)?
 
Ja, in je PHP bestand. Zoals phobia zei moet je er een limiet op zetten, echter, je gebruikt geen database maar xml file.

Het hele script is een beetje raar, maargoed. Je moet hier zijn:
PHP: 
      if ($hint=="")
        {
        $hint="<a href='" .
        $z->item(0)->childNodes->item(0)->nodeValue .
        "' target='_blank'>" .
        $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      else
        {
        $hint=$hint . "<br /><a href='" .
        $z->item(0)->childNodes->item(0)->nodeValue .
        "' target='_blank'>" .
        $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
Je zult een counter moeten maken en deze laten inc'en als $hint != '' is. Als counter groter is dan x (10 ofzo), die() $hint, anders ga je door.
 
bla dat gaat me net even te ver allemaal. ik heb juist ene script gepakt omdat ik zelf geen idee heb hoe ik dit soort dingen maak
 
Vooruit, voor deze ene keer, omdat ik ook mudkips liek:

PHP: 
$max = 10;   // deze mag je aanpassen

$cnt = 1;

if ($hint=="")
        {
        $hint="<a href='" .
        $z->item(0)->childNodes->item(0)->nodeValue .
        "' target='_blank'>" .
        $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      else
        {
$cnt++;
if($cnt == $max)
{
   die($hint);
}
        $hint=$hint . "<br /><a href='" .
        $z->item(0)->childNodes->item(0)->nodeValue .
        "' target='_blank'>" .
        $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
(dat dus ipv. die code van mn eerdere post)
 
He, dat's raar. Doe deze eens?
PHP: 
if ($hint=="")
        {
        $hint="<a href='" .
        $z->item(0)->childNodes->item(0)->nodeValue .
        "' target='_blank'>" .
        $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      else
        {
			$cnt++;
			if($cnt == $max)
			{
			   die($hint);
			}
        $hint=$hint . "<br />" . $cnt . " - <a href='" .
        $z->item(0)->childNodes->item(0)->nodeValue .
        "' target='_blank'>" .
        $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
 
werkt ook niet helemaal maar de output geeft wel een tip. de output is namelijk:

Halsema
2 - Halsema2
2 - Halsema3
2 - Halsema4
2 - Halsema5
2 - Halsema6
2 - Halsema7
2 - Halsema8
2 - Halsema9
2 - Halsema10
2 - Halsema11
2 - Halsema12
2 - Halsema6
2 - Halsema7
2 - Halsema8
2 - Halsema9
2 - Halsema10
2 - Halsema11
2 - Halsema12


ik denk dus dat de counter tot 2 telt en dan uit zn loop gaat ... of in ieder geval niet verder telt?

de nieuwe code staan op dezelfde url, en je kunt ook testen via dezelfde url als vorige post
 
Oeps, mijn fout. Hij maat $cnt steeds op nieuw aan, dus die komt inderdaad nooit hoger dan 2.

Doe deze eens, dat zou moeten werken:
PHP: 
<?php

$max = 10;   // deze mag je aanpassen
 

$cnt = 1;
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");

$x=$xmlDoc->getElementsByTagName('link');

//get the q parameter from URL
$q=$_GET["q"];

//lookup all links from the xml file if length of q>0
if (strlen($q)>0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
  {
  $y=$x->item($i)->getElementsByTagName('title');
  $z=$x->item($i)->getElementsByTagName('url');
  if ($y->item(0)->nodeType==1);
    {
    //find a link matching the search text
    if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
      {
 
if ($hint=="")
        {
        $hint="<a href='" .
        $z->item(0)->childNodes->item(0)->nodeValue .
        "' target='_blank'>" .
        $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      else
        {
            $cnt++;
            if($cnt == $max)
            {
               die($hint);
            }
        $hint=$hint . "<br />" . $cnt . " - <a href='" .
        $z->item(0)->childNodes->item(0)->nodeValue .
        "' target='_blank'>" .
        $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      }
    }
  }
}

// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint=="")
  {
  $response="no suggestion";
  }
else
  {
  $response=$hint;
  }

//output the response
echo $response;
?>
:thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan