Ergebnis 1 bis 2 von 2

Thema: autocomplete Suchbox mit Pfeiltasten bewegen

  1. #1
    Neuer Benutzer
    Registriert seit
    01.04.2009
    Beiträge
    1

    Standard autocomplete Suchbox mit Pfeiltasten bewegen

    Hallo Freunde,

    bin neu in der Webentwicklung und hab mir schon so einiges zusammengesucht und auch nun was zusammengebastelt.
    Habe eine autocomplete Suche realisiert, die auf ein JSP zurückgreift.
    Dann werden die Ergebnisse in ein <div> geschrieben.
    Wunderbar. Nun möchte ich jedoch, dass ich aus der DIV-Box heraus nicht nur per Mausklick, sondern auch per Pfeiltaste und Enter auswählen kann.

    Kann mir da jemand helfen? Ich verzweifle gerade total.
    Hab schon gefunden, dass man die Keys per Javascript abfangen kann durch die try-catch Blöcke...aber wie kann ich die Elemente im DIV nun auswählen?

    Ich hänge euch den Code mal ran.

    Vielen Dank

    mongrel

    Code:
    <html>
    	<head>
    		<title>
    			Title
    		</title>
    		<STYLE TYPE="TEXT/CSS">
       body { font-family: sans-serif }
          a.input {
             FONT-SIZE: 12px;
             FONT-FAMILY: Verdana; 
             border: none;   
          }
          a.auswahlzeile {
          z-index:1;
    	  color: black;
    	  text-decoration: none;
    	  display: block;
    	  width: 100%;
    	}
    	a.auswahlzeile:hover {
    	  background-color: #C0C0C0;
        }  
          
    		</STYLE>
    		
    	 <script language="JavaScript" type="text/javascript">
    	var req = null;
    	var eingabetext = "";
    	var auswahlarray = new Array();
    	function meinAjaxInit() {
    	  try {
    		if( window.XMLHttpRequest ) {
    		  req = new XMLHttpRequest();
    		} else if( window.ActiveXObject ) {
    		  req = new ActiveXObject( "Microsoft.XMLHTTP" );
    		} else {
    		  alert( "Ihr Webbrowser unterstuetzt leider kein Ajax!" );
    		}
    	  } catch( e ) {
    		alert( "Fehler: " + e );
    	  }
    	}
    	function meinAjaxAufruf( eingabe ) {
    	  meinAjaxInit();
    	  if( req ) {
    		eingabetext = eingabe;
    		document.formular.eingabefeld.focus();
    		var url = "search.jsp?eingabe=" + escape( eingabetext );
    		req.open( "GET", url, true );
    		req.onreadystatechange = meineCallbackFkt;
    		req.send( null );
    	  }
    	}
    	function meineCallbackFkt() {
    	  if( 4 == req.readyState ) {
    		if( 200 != req.status ) {
    		  alert( "Fehler " + req.status + ": " + req.statusText );
    		} else {
    		  var auswahlinhalt = "";
    		  var text = req.responseText;
    		  if( text != "" ) {
    			auswahlarray = text.split( ";" );
    			for( var idx in auswahlarray ) {
    			  auswahlinhalt += "<a href='javascript:meinMausklick(" + idx + ")' id='" + idx;
    			  auswahlinhalt += "' class='auswahlzeile' onmouseover='meinMausover("+idx+")'>";
    			  auswahlinhalt += auswahlarray[idx] + "</a>";
    			}
    			document.getElementById( "auswahlbox" ).innerHTML = auswahlinhalt;
    		  }
    		  if( auswahlinhalt != "" ) {
    			document.getElementById( "auswahlbox" ).style.visibility = "visible";
    		  } else {
    			document.getElementById( "auswahlbox" ).style.visibility = "hidden";        
    		  }
    		}
    	  }
    	}
    	function meinMausklick( idx ) {
    	  if( auswahlarray[idx] != null && auswahlarray[idx] != "" ) {
    		var eingabefeld = document.formular.eingabefeld;
    		eingabefeld.value = auswahlarray[idx];
    		eingabefeld.focus();   
    		
    		document.getElementById( "auswahlbox" ).style.visibility = "hidden";        
    	  }
    	}
    	function meinMausover( idx ) {
    	  if( auswahlarray[idx] != null && auswahlarray[idx] != "" ) {
    		var eingabefeld = document.formular.eingabefeld;
    		var start = eingabetext.length;
    		var laenge = auswahlarray[idx].length;
    		eingabefeld.value = auswahlarray[idx];
    		if( eingabefeld.createTextRange ) {
    		  var Auswahl = eingabefeld.createTextRange();
    		  Auswahl.moveStart( "character", start );
    		  Auswahl.moveEnd( "character", laenge - start );
    		  Auswahl.select();
    		} else if( eingabefeld.setSelectionRange ) {
    		  eingabefeld.setSelectionRange( start, laenge );
    		}
    		eingabefeld.focus();
    	  }
    	}
      </script>	
    		
    	</head>
    	<body>
    	<noscript>
    	<font color="red"><big><b>Bitte JavaScript einschalten!</b></big></font><br>
        </noscript>
    	
    	
    	
    	
    	<form name="formular" action="#" >
    		<div id="RatSearchBox" style="font-family:Verdana; font-size:12px">
    		<div>
    			<div style="height:19px; background-image:url(App1_head.jpg); background-repeat:no-repeat; max-width:260px; max-height:19px; color:#FFFFFF;">
    				<div style="position:relative; top:2px; left:10px">
    				<b>Lebenslage suchen</b>
    				</div>
    			</div>
    		</div>
    		<div>
    			<div style="height:130px; background-image:url(App1_body.jpg); background-repeat:no-repeat; max-width:260px; max-height:130px; ">
    			
    			<div style="position:relative; top:10px; left:10px; font-family:Verdana; font-size:10px; ">
    			<input class="input" name="Sajax" id="eingabefeld" type="text" size="28" value="Finden..." onKeyUp="meinAjaxAufruf( this.value )" onfocus="javascript:if (this.value=='Finden...') this.value=''" onblur="javascript:if (this.value=='') this.value='Finden...'" />
    			</div>
    			<div style="position:relative; top:10px; left:10px; font-family:Verdana; font-size:10px; " id="auswahlbox" style="width: 160px; border: none;"></div>
    		</div>
    		
    		</div>
    		
    </form>
    		
    	</body>
    </html>

  2. #2
    Neuer Benutzer
    Registriert seit
    19.01.2010
    Beiträge
    1

    Standard F*** Pfeiltasten

    Hallo!

    Zwar ist der letzte Post schon etwas älter, aber ich stehe gerade vor dem gleichen Problem. Ich versuche das Event folgender Funktion abzufangen:

    function activateArrow(e){
    var lastSelected = selectedElement;
    var doSelect = false;
    var keyCode = getKeyCode(e);

    switch (keyCode){
    case 40:
    if(!selectedElement){
    //alert("huhu");
    selectedElement = document.getElementById("normlist").getElementsByT agName("li")[0];
    selectedElement.className = "active";
    }
    break;
    //...
    }
    }

    selectedElement ist dabei eine globale Variable, mit der ich überprüfe, ob bereits ein Listelement ausgewählt wurde. Das Ganze klappt auch, aber nur für eine Sekunde. Dann wird die Klasse wieder zurückgesetzt und ich finde nicht heraus warum. Gebe ich vor Zuweisung der Klasse (testweise) eine Box aus, funktioniert es und die Klasse bleibt aktiv. Kann mir einer erklären warum?
    ( Es geht um Norm-Drehteile: DIN, DIN EN, DIN EN ISO um die Input - Box unter Norm-Nr.)

    Bin für jeden Hinweis dankbar.
    Beste Grüsse, Matze

Ähnliche Themen

  1. Images oder Layer automatisch bewegen
    Von quiety im Forum Allgemein
    Antworten: 0
    Letzter Beitrag: 04.11.2008, 14:18
  2. Suggest - Auswahl mit Pfeiltasten?
    Von oezi im Forum Sonstige Probleme
    Antworten: 0
    Letzter Beitrag: 31.07.2007, 17:08
  3. Layer Bewegen!
    Von artis im Forum Allgemein
    Antworten: 1
    Letzter Beitrag: 25.06.2007, 07:54
  4. Panel bewegen wie die Karte bei Google Maps
    Von matze.de im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 13.08.2006, 12:04
  5. Antworten: 3
    Letzter Beitrag: 16.06.2006, 20:15

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •