Hjelp til søk i drop-down meny

prosjeik · 19. mai 2014

<html>
<head>

<script type="text/javascript"> 
<!--//--><![CDATA[//><!--
startList = function() {
 
if (document.getElementById) {
	navRoot = document.getElementById("nav");
	for (i=0; i<navRoot.childNodes.length; i++) {
		node = navRoot.childNodes[i];
		if (node.nodeName=="LI") {
		node.onclick=function() {
		
this.className = (this.className == "on") ? "off" : "on";
 
			}
   		}
  	}
 }
}
window.onload=startList;
//--><!]]>
</script>
<style type="text/css"> 
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:small;	
}
* html body{
	font-size:small;	
	f\ont-size:small;	
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width:190px
}
/*     SETTER VIDDE PÅ HOVEDMENY........................... */ 
ul li {
	position: relative;
	width:190px;
	border: 1px solid #ccc;
}
/* keep folowing styles together..........................*/
* html ul ul {
	;/* ie5 fix */
	voice-family: "\"}\""; 
	voice-family: inherit;
}	
* html ul li {float:left;/* hide float from ie5*/}
* html ul ul {
	width:150px;	
	w\idth:148px;
	voice-family: "\"}\""; 
	voice-family: inherit;	
}
* html ul ul {margin-left:0;/* hide margin from ie5*/}
 
/* keep above styles together .............*/
 
li ul {
	position: relative;
	display:none;
}
/*      SETTER VIDDE PÅ UNDERMENY............og setter undermeny-bord til orange...............*/
li ul li {
	width:190px;
	border-left:8px solid darkorange
}
 
/* Styles for Menu Items */
ul li a {
	display:block;
	text-decoration: none;
	color: #000;
	background: #dddddd; /* IE6 Bug */
	line-height:2em;
	height:2em;	
	padding:0 5px
}
li li a {background:#eeeeee}
 
/* set dropdown to default */
li:hover li a, li.over li a {
    color: #777;
   background-color: #ffffff;
}
 
/* this sets all hovered lists to red */
li a:hover,
li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
   color: #000;
   background-color: #cccccc;
}
 
li ul li  {  } /* Sub Menu Styles */
 li.on ul { display:block  } /* The magic */
li.off ul{display:none}
</style>


<style>
a {
text-decoration:none;
}
</style>

</head>
<body bgcolor="white" text="black" link="blue" vlink="blue">
<font face="verdana" size="2">

<center>


<p>
<h3>Nyheter</h3>



<ul id="nav">

  <li><a href="#"><b>Norske nyheter</b></a> 
    <ul>
      <li><a href="vg.no" target="_top">VG </a></li>
      <li><a href="dagbladet.no" target="_top">Dagbladet </a></li>
      <li><a href="nrk.no" target="_top">NRK </a></li>
	  <li><a href="tv2.no" target="_top">TV2 </a></li>
      <li><a href="tvnorge.no" target="_top">TVN </a></li>

	  </ul>
  </li>
  <li><a href="#"><b>Utenlandske nyheter</b></a> 
    <ul>
      <li><a href="news.google.com" target="_top">Google News</a></li>
      <li><a href="bbc.com" target="_top">BBC</a></li>
      <li><a href="cnn.com" target="_top">CNN</a></li>
    
    </ul>
  </li>

</ul>



</center>
</body>
</html>

Noen som kan hjelpe meg å få lagd en søkeboks på denne drop-down menyen?

Lista skal bli ganske lang etter hvert, så jeg ønsker å kunne søke/taste inn noen bokstaver for å filtrere lista. Søket må skje dynamisk (ikke søkeknapp) slik at resultatene dukker opp etterhver som du skriver.

Vedlagt ligger JavaScript-fila som får menyen til å virke.

19. mai 2014

Ingen vedlegg..

EDIT
PS: Se på jQuery http://jqueryui.com/autocomplete/#combobox

Endret 19. mai 2014 av Gjest

Logg inn

Hjelp til søk i drop-down meny

Anbefalte innlegg

prosjeik

Lenke til kommentar

Videoannonse

Gjest

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer