JavaScript Frage, jQuery multiselect Skript mehrfach benutzen

Domi83

Rear Admiral
Registriert
Feb. 2010
Beiträge
5.202
Hallo Leute, ich habe da ein kleines Problem... Und zwar habe ich von hier die searchable Version für ein multiple Select bei uns im Intranet hinterlegt. Problem ist, wir haben zwei select Felder und wenn ich bei dem zweiten Feld etwas anwähle, taucht es doppelt auf. Vermutlich liegt das daran, dass die Value Werte in den beiden Feldern identisch sind, obwohl der Name unterschiedlich ist.

Ich wollte eigentlich ein Beispiel in einer simplen html Datei aufbauen um zu zeigen was mein Problem ist, aber aktuell harkt es daran das ich das searchable Skript nur einmal ausführen kann. Nun wären also folgende Probleme da...

1.) Wieso bekomme ich das Skript nur noch einmal zum laufen?
2.) Wenn man es zweimal zum laufen bekommt, wie kann ich vermeiden das im zweiten select Feld die Werte immer doppelt übernommen werden?

Mein Test-Skript welches ich mir eben aufgebaut habe, sieht gerade wie folgt aus...
HTML:
<html>
    <head>
        <link href="multi-select.css" media="screen" rel="stylesheet" type="text/css">
        <script src="https://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    <table>
        <tr>
            <td>
                <select class="searchable" id="bla" name="filter_bla[]" multiple="multiple">
                    <option value="test1">Test 1</option>
                    <option value="test2">Test 2</option>
                    <option value="test3">Test 3</option>
                    <option value="test4">Test 4</option>
                    <option value="test5">Test 5</option>
                </select>
            </td>
            <td>
                <select class="searchable" id="nobla" name="filter_nobla[]" multiple="multiple">
                    <option value="test1">Test 1</option>
                    <option value="test2">Test 2</option>
                    <option value="test3">Test 3</option>
                    <option value="test4">Test 4</option>
                    <option value="test5">Test 5</option>
                </select>
            </td>
        </tr>
    </table>

<script src="jquery.multi-select.js" type="text/javascript"></script>
<script type="text/javascript">
    $('.searchable').multiSelect({
        selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='try \"12\"'>",
        selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='try \"4\"'>",
        afterInit: function(ms){
            var that = this,
                $selectableSearch = that.$selectableUl.prev(),
                $selectionSearch = that.$selectionUl.prev(),
                selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
                selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';

            that.qs1 = $selectableSearch.quicksearch(selectableSearchString).on('keydown', function(e){
                if(e.which === 40){
                    that.$selectableUl.focus();
                    return false;
                }
            });

            that.qs2 = $selectionSearch.quicksearch(selectionSearchString).on('keydown', function(e){
                if(e.which == 40){
                    that.$selectionUl.focus();
                    return false;
                }
            });
        },
        afterSelect: function(){
            this.qs1.cache();
            this.qs2.cache();
        },
        afterDeselect: function(){
            this.qs1.cache();
            this.qs2.cache();
        }
    });
</script>
    </body>
</html>

Falls jemand einen Tipp / Ansatz für mich hat, wäre ich dankbar... denn irgendwie stehe ich gerade komplett auf dem Schlauch und würde gerne mit der Maske ein wenig weiter kommen :)

Gruß, Domi

p.s. Wenn jemand ein ähnliches jquery Skript für mich hat, würde mich dieses natürlich auch interessieren und mir anschauen.
 
Ohne jetzt näher draufgeschaut zu haben: bindest Du wirklich die jQuery-Bibliothek zweimal ein?

Einmal reicht, und möglicherweise liegt ein Teil Deines Problems bereits darin begründet.

Und, kleiner Hinweis: lad Dir eine Kopie der jQuery-Bibliothek runter, speicher die irgedwo und referenziere das dann. Nicht nur, daß Du so externen Traffic sparst; Du riskierst auch, daß die jquery-latest von "morgen" mit der von "heute" nicht mehr kompatibel ist.
 
Hi, ich musste selbst erst einmal via VPN bei uns auf den Server gucken, weil ich nicht wusste ob es dort genau so ist... oben im 'head' habe ich die "jquery-3.3.1.min.js" eingebunden und unten wo das Skript erst gestartet werden soll, habe ich die Bibliothek von der verlinkten Seite eingebunden.

Die 'jquery-latest' habe ich eingebaut, weil ich hier zuhause das ganze nachbauen wollte um zu gucken ob ich das bei einer ganz "nackten" Seite auch so habe wie im Büro im Intranet, allerdings funktioniert hier noch weniger als bei uns im Büro :D

Musste aber im ersten Moment nachgucken, weil ich doch etwas erschrocken war ob ich die jQuery Bibliothek nicht doch doppelt lade.
 
Nun weiß ich ja nicht, wie es bei Dir produktiv aussieht... aber in dem Snippet von da oben fehlen das multiselect-Plugin selber (via loudev) und das Quicksearch-Plugin (via github:riklomas/quicksearch).

Hab das mal bei mir implementiert und es funktioniert augenscheinlich, auch zweimal (Win10:1809 / IE11).

/ Hinweis, QuickSearch will >= 6y alt sein und ist lt Autor "very much dead (and) unmaintained". Wenn damit was ist, wird Dir also keiner mehr entgegenkommen können. Schau mal nach, ob Du Alternativen findest.
 
Zuletzt bearbeitet von einem Moderator:
Ahhh... alles klar, Fehler gefunden... hab den Wald vor Lauter Bäumen nicht gesehen.
HTML:
<script src="jquery.multi-select.js" type="text/javascript"></script>
<script src="jquery.quicksearch.js" type="text/javascript"></script>
Die beiden eingebunden und zack geht es und witziger weise klappt es in meinem Test nun sogar korrekt und auf der Arbeit nicht. Ich werde mir meine Test Datei mal auf den Server schieben und morgen auf der Arbeit mit meinem Kollegen prüfen wo da die Fehler sind.

Ich bedanke mich schon mal vielmals für die Tipps und Anstubser... Wenn ich das jQuery Skript im Internet korrekt zum laufen bekomme, gebe ich via Edit noch mal ein Feedback.

Nachtrag: Moin, der Fehler lag nicht im Java / jQuery Skript... es war ein PHP Fehler... ich habe versehentlich das Array doppelt gefüllt welches mir die options füllt die mir zur Auswahl stehen. Das jQuery Skript hatte mir die Daten in der linken Spalte nur einmal angezeigt, aber beim anklicken kamen diese doppelt in die Liste weil sie ja auch doppelt existierten. Ich habe die zweite Methode die mir das Array füllt raus genommen und nun ist auch alles wieder schön :)
 
Zuletzt bearbeitet:
Zurück
Oben