Suchbox Aktionen

Ich habe immer mal wieder Suchboxen, bei denen ich das Problem habe dass ich auf Grund der großen Datenmengen kaum Autocomplete machen kann, aber trotzdem bestimmte Filter bzw. Aktionen notwendig sind. Ein Beispiel hierfür wäre zum Beispiel ein Ticket direkt, anhand seiner ID zu öffnen, statt danach zu suchen. Alternativ möchte man zum Beispiel nur bestimmte Informationen suchen.

Da mir die existierenden Lösungen nicht so gut gefallen hab ich mir selbst etwas mit jQuery gebaut, das meine Anforderungen erfüllt.

Das FilterList Plugin wird einfach direkt nach jQuery in den HTML Markup eingebunden und anschließend konfiguriert. Es muss lediglich die Suchbox (HTML Input-Feld) und die gewünschten Aktionen angegeben werden.

Beispiel

$('#search').filterlist({
    'actions':[
        {'test':/^\d+$/,
        'title':'Open Ticket "{0}"',
        'help':'Number',
        'action':function(val){window.location.href = "https://github.com/emposha/FilterList/pull/"+val;}},
        {'test':/^l$/,
        'title':'Log Ticket',
        'help': 'l',
        'action':function(val){window.location.href = "https://github.com/chkorn/FilterList/issues/new";}},
        {'test':/^(i )(\w+)/,
        'title':'Open Item',
        'action':function(val){alert("Search...");}},
        {'test':null,
        'title':'Search',
        'action':function(val){alert("You should trigger a search");}},
    ]
});

Beispiel ausprobieren.

Die Aktionen bestehen immer aus:

• Einem test, dem der aktuelle String im Input-Feld unterzogen wird. Gültige Werte sind null oder ein regulärer Ausdruck
• Der durchzuführenden Aktion (action), wenn diese ausgewählt wurde. Dies ist eine normale JavaScript Funktion mit dem aktullem Eingabewert als Paramter
• Einem Titel (title) für die angezeigte Aktion
• Einem optionalen Hilfetext (help)

Weitere Features

Alle im Script verwendeten Strings sind je nach Geschmack anpassbar und alle Ergebnisse sind mit CSS Klassen für einfache Anpassbarkeit des Aussehens ausgestattet.

Download & Co.

Der Code ist auf GitHub gehosted, ausserdem enthält die README Datei weitere Informationen zur Funktionsweise.