jQuery UI bietet seit einiger Zeit ein "Autocomplete-Widget" an, mit dem man den mittlerweile ja auch von Google bekannten Effekt erzielen kann, dass noch während des Tippens innerhalb einer Textbox Vorschläge gemacht werden. Wie das Ganze mit ASP.NET MVC kombiniert verwendet werden kann, hat Alexander Zeitler erst kürzlich demonstriert.
Mir ging das noch nicht weit genug, ich wollte noch die Möglichkeit bekommen, per Enter bei Auswahl eines Vorschlags das Formular automatisch abzuschicken. Das lässt sich mit Hilfe des Select-Events auch sehr einfach erreichen. Doof nur, dass damit ein unangenehmer Effekt auftritt:
Wählt man nämlich keinen der angezeigten Vorschläge aus und drückt Enter, passiert nichts. Ziemlich doof, vor allem wenn man ein Wort bereits fertig getippt hat, dass dann womöglich in der Liste erscheint - das will man ja normalerweise nicht noch extra auswählen müssen.
Das Event wird schlichtweg abgefangen und ignoriert. Glaubt man den Entwicklern, ist dies ein bewusst gewähltes Verhalten, was sich aber in Zukunft ändern wird.
Abilfe schafft eine Funktion, die man ans KeyPress-Event der Textbox dranhängt, und mit welcher man analog zum Select-Event der AutoComplete-Funktion das Formular einfach selbst abschickt. Nachfolgend ein komplettes Beispiel.
1: <script type="text/javascript">
2: $(document).ready(function () {
3:
4: $('#MainSearchBox').autocomplete({
5: source: '<%= Url.Action("autocomplete", "search") %>',
6: minLength: 1,
7: select: function (event, ui) {
8: $("#MainSearchForm").submit();
9: }
10: });
11:
12: $("#MainSearchBox").keypress(function (event) {
13: if (event.keyCode == 13)
14: $("#MainSearchForm").submit();
15: });
16:
17: });
18: </script>
19:
20: <h2>Suche</h2>
21:
22: <form action="<%= Url.Action("index", "search") %>" method="get" id="MainSearchForm">
23: <input type="text" id="MainSearchBox" name="q" value="<%: Model.Query %>" /> <input type="submit" value="Suche" />
24: </form>
