(Anfänger) Suchfunktion

[capricorn2388]

Hallo,

folgendes Problem: ich habe ein Suchfeld - wenn ein Begriff dort eingetragen wird, soll sich darunter eine Box mit möglichen Suchbegriffen ausklappen (aus der var regionen). Das ganze soll nur mit Javascript funktionieren. Was ich bis jetzt habe ist einfach eine Box die sich darunter aufklappt und das gesammte Array ausgibt. Würde mir hier jemand Hilfestellung geben, bin leider noch blutiger Anfänger :shock:.

function zeigeRegionen() {
    var regionen = ["Afghanistan", "Ägypten", "Albanien", "Algerien", "Andorra", "Angola", "Antigua und Barbuda", "Äquatorialguinea", "Argentinien", "Armenien", "Aserbaidschan", "Äthiopien", "Australien", "Bahamas", "Bahrain", "Bangladesch", "Barbados", "Belgien", "Belize", "Benin", "Bhutan", "Bolivien ", "Bosnien und Herzegowina", "Botsuana", "Brasilien", "Brunei", "Bulgarien", "Burkina Faso", "Burundi", "Chile ", "China", "Costa Rica", "Dänemark", "Deutschland"];

    var suchText = document.getElementById('suchfeld').value;

    suggest = '';
        
        for (var region = 0; region < regionen.length; ++region) {
            suggest += "<p onclick='suchbegriffEinfuegen(" + "\"" + regionen[region] + "\"" + ");'>" + regionen[region] + "</p>";
        }
        
        document.getElementById('suggestbox').innerHTML = suggest;
    
}

function suchbegriffEinfuegen(Land) {
    document.getElementById('suchfeld').value = Land;
}

 

[Tronjer]

Schau dir mal das hier an:

Autocomplete | jQuery UI

 

[capricorn2388]

Schau dir mal das hier an:

Autocomplete | jQuery UI

Aber das funktioniert mit jQuery oder?

 

[Cheffchen]

Hallo,

ja und wo ist da das Problem?
Hast etwa noch nichts auf der Seite das jquery brauch, keine schicken erffekte?

Cheffchen

 

[Queckezz]

Mit HTML5 ist dieses Feature komplett ohne javascript möglich.

Schau dir mal das Datalist element an. Mit ein paar Codezeilen bringst du eine schöne autocomplete Funktion in deine Website ein. Jetzige Versionen von Chrome, Firefox, Opera und Internet Explorer !10! unterstützen dieses Element. Wenn du aber die älteren Browser unterstützen willst ( IE 8 & 9 ) musst du noch zusätzlichen Code schreiben:

https://github.com/thgreasi/datalist-polyfill (Englisch)
Eine einfache Anleitung wie man das <datalist> element simuliert mit jQuery

 

[Tronjer]

Du kannst das auch selber bauen, aber die Aufgabe ist nicht ganz einfach.

Ich würde zwei Dateien anlegen. In der ersten steht das Input-Feld und darunter ein leerer Div-Container. Auf das Input-Feld kommt ein onchange(), welches bei Eingabe eines Buchstabens jedes mal einen Ajax-Request triggered, der den Feldinhalt an die zweite Datei durchreicht. In die zweite Datei kommen Datenquelle (Array, Query, ...), eine Funktion, die den per Ajax-Call übergebenen String gegen die Quelle matched und das HTML, welches zurückgeliefert werden soll.

 

[capricorn2388]

Vielen Dank für die ganzen Antworten.

Leider darf wirklich nur JavaScript, xhtml und php verwendet werden, is no ne Art Übungsaufgabe!

Es muss auch weder tolle Effekte haben noch gut aussehen, es soll einfach funktionieren.
Ich weiß, ist nicht gerade auf dem neuesten Stand aber muss so sein, sorry.

 

[Trüffelkrieger]

Aber jQuery ist doch JavaScript?

 

[dodo2998]

Ich hätte noch eine Möglichkeit.
Ich möchte dir nicht gleich die Lösung verraten, aber versuch doch deine Seite auf Tastendrücke reagieren zu lassen, woraufhin dann eine Selectbox eingeblendet wird. Und er testet pro Eintrag im Array, ob der String mit dem Eingegebenem übereinstimmt.
Ich finde onChange ziemlich sinnlos, wenn man bedenkt, wann das event ausgelöst wird; nähmlich nachdem man aus dem Feld rausgeht ;) Das event machts einfacher.
Und das Event muss (wichtig!) per JavaScript eingebunden werden, und zwar nur im das Textfeld!

Ich hoffe ich konnte helfen...