sliwalker: Dynamisches Dropdownmenü: Enter soll nicht IMMER auslösen

Beitrag lesen

Jetzt ist ein Eintrag ausgewählt und der Text steht drin. Ein weiteres Enter soll jetzt aber das Formular abschicken. Da die bedingung immer noch zutrifft wird es aber nicht abgeschickt.

Nach dem Übertragen ist der Eintrag ausgewählt, also musst du etwas anderes prüfen als »ist ein Eintrag ausgewählt«.

Das ist nicht möglich, weil zum Suchformular diverse andere Felder gehören, die alle ausgefüllt sein können oder auch nicht. Einzige Problematik ist ja dabei, dass das Formular abgeschickt wird, weil das Caret im Textfeld steht, dass zum Formular gehört.

Hat jemand eine Idee wie man das besser lösen könnte?

Ein Suchfeld, das auch nur für die Suche zuständig ist und mit dem Formular selbst nichts zu tun hat.
Die Auswahl wird dann im per Ajax geladenen Auswahlmenü getroffen. Diese Formularfelder sind dann normativ.

Sinn des ganzen war, ein Eingabefeld zu haben, wo Werte dynamisch geladen werden. Zuerst war es ein select-Element, aber bei ca. 5000 Werten und bis zu 5 diser select-Elementen auf einer Seite hat der IE gestreikt. Mozilla konnte es nach eingebautem Caching, damit die Suche nicht jedesmal neu ausgeführt wurde. Sprich, das was in den Vorschlagslisten geladen wird(Tooltip mit li-Elementen HTML-technisch bzw. Objekte in einer Liste als JavaScript-Pendant), sollen dann auch ins Eingabefeld übertragen werden, damit der User es sehen kann und es nach abschicken auch als Suchkriterium genutzt werden kann.
Deshalb meine ich zu verstehen, dass ein Suchfeld das nicht zum Formular gehört, wohl nicht geht. Richtig?

Oder du machst einen klassischen Ajax-Autocomplete, wo das Absenden des Formulars überhaupt nicht mit dem Bestätigen eines Vorschlages verwechselt werden kann - bzw. weil die Vorschläge fokussierbare a-Elemente und keine Formularfelder sind. Die Navigation in den Vorschlägen kann durchaus mit Tastatur möglich sein (Tabulator, Pfeiltasten, Enter). Hat ein Vorschlag den Fokus und drückt man Enter, klappen die Vorschläge zu, der Wert des inputs wird aktualisiert und das input-Feld wird fokussiert.

Eine klassische Ajax-Autocomplete? Was ist denn klassich? Wie oben beschrieben füge ich eine ul-Liste mit li-Elementen auf der Seite ein, die ich mit CSS gestalte und formatiere. Dahinter liegt ein JavaScript Objekt dass eine Liste mit Werten hält und weitere steuervariablen.
Die EventListener habe ich auf die Liste und das zugehörige input-textfield gelegt. Irgendwas daran nicht konform?

Aber ich probiere mal einen Nebensatz von Dir aus. Nämlich das input-textfield bei einem KeyEvent zu fokussiren. Vielleicht hilft das ja gegen das Auslösen des Submits. Oder kann ich den KeyEvent auch konsumieren? zerstören, während ich ihn bearbeite?

Hier mal ein Auszug aus meiner Bearbeitung des Events. Da ein event.consume(9 rein oder so würde ja helfen, denke ich.

  
  
function branchListKeyboardAction(element, branchListAutoCompleteListAsParam, branchListTextField, eventIncoming)  
{//alert("branchListKeyboardAction");  
 switch (eventIncoming.keyCode) {  
  
  case 27: // ESC  
   branchListAutoCompleteListAsParam.setVisible(false);  
   break;  
  
  case 38: // KEYUP  
   branchListAutoCompleteListAsParam.selectPrevious();  
   break;  
  
  case 40: // KEYDOWN  
   branchListAutoCompleteListAsParam.selectNext();  
   break;  
  
  case 13: // ENTER  
   //alert("enter");  
   var selectedObject = branchListAutoCompleteListAsParam.getSelectedObject();  
   var textField = document.getElementById( branchListTextField );  
   textField.value = selectedObject.title;  
   break;  
  
  default:  
  {  
   var currentEventChar = (String.fromCharCode(eventIncoming.keyCode)).toLowerCase();  
   var currentValue = element.value;  
   currentValue += currentEventChar;  
   if ((currentValue.basicTrim()).length > 2) {  
    this.branchListAutoCompleteList = branchListAutoCompleteListAsParam;  
    searchBranch(encodeURI(currentValue));  
   }  
  }  
 }  
  
}