Ankündigung

Einklappen
Keine Ankündigung bisher.

Problem bei Multiple Datalist [jQuery]

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Problem bei Multiple Datalist [jQuery]

    Hallo zusammen,

    ich wollte mir ein Multiples Input erstellen wo mehrere Daten ausgewählt werden können.
    Allerdings springt er immer wenn ich "KOMMA & LEERTASTE (, )" drücke, um 1 Zeichen nach hinten und dann kann ich nicht mehr einfachheitshalber ein
    Buchstaben eingeben und es aussuchen. Ich muss dann immer 1 Buchstaben an das "KOMMA (,)" setzen und hinter den Buchstaben eine "LEERTASTE ( )" machen.
    Erst dann wird mir wieder ein neuer Name vorgeschlagen.

    Ich würde also gerne wissen, wie ich am besten das verhinder mit dem 1 Zeichen zurück.
    Also wie kann ich am besten ein Buchstaben eingeben... Auswählen was ich haben will... Dann "KOMMA & LEERTASTE (, )"... Wieder ein Buchstaben eingeben, Auswählen was ich haben will ... und so weiter ???

    Mein Code:
    PHP-Code:
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
                <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
                <script type="text/javascript">
                var datalist = jQuery('datalist');
                var options = jQuery('datalist option');
                var optionsarray = jQuery.map(options ,function(option) {
                    return option.value;
                });
                var input = jQuery('input[list]');
                var inputcommas = (input.val().match(/,/g)||[]).length;
                var separator = ',';

                function filldatalist(prefix) {
                    if (input.val().indexOf(separator) > -1 && options.length > 0) {
                        datalist.empty();
                        for (i=0; i < optionsarray.length; i++ ) {
                            if (prefix.indexOf(optionsarray[i]) < 0 ) {
                                datalist.append('<option value="'+prefix+optionsarray[i]+'">');
                            }
                        }
                    }
                }

                input.bind("change paste keyup", function() {
                    var inputtrim = input.val().replace(/^\s+|\s+$/g, "");
                //console.log(inputtrim);
                    var currentcommas = (input.val().match(/,/g)||[]).length;
                //console.log(currentcommas);
                    if (inputtrim != input.val()) {
                        if (inputcommas != currentcommas) {
                            var lsIndex = inputtrim.lastIndexOf(separator);
                            var str = (lsIndex != -1) ? inputtrim.substr(0, lsIndex)+", " : "";
                            filldatalist(str);
                            inputcommas = currentcommas;
                        }
                        input.val(inputtrim);
                    }
                });
                </script> 
    Ich habe schon mehrere Varianten versucht...
    PHP-Code:
    var str = (lsIndex != -1) ? inputtrim.substr(0lsIndex)+", " "";
    /* wurde dann zu */
    var str = (lsIndex != -1) ? inputtrim.substr(0lsIndex)+"," "";
    /* oder */
    var str = (lsIndex != -1) ? inputtrim.substr(0lsIndex)+", " ", ";
    /* oder */
    var str = (lsIndex != -1) ? inputtrim.substr(0lsIndex)+", " " "
    Dann hab ich das versucht...
    PHP-Code:
    var inputtrim input.val().replace(/^\s+|\s+$/g"");
    /* wurde zu */
    var inputtrim input.val().replace(/^\s+|\s+$/g" ");
    /* oder */
    var inputtrim input.val().replace(/^\s+|\s+$/g", "); 
    und vieles mehr... ich bin mit meinem Latein am ende :/


  • #2
    Wozu soll das gut sein?

    Kommentar


    • #3
      Zitat von protestix Beitrag anzeigen
      Wozu soll das gut sein?
      Dein ernst ? ... Hast du überhaupt gelesen ?
      Ich will ein Multiple Datalist für mein Input text machen... Dazu tippe ich in das Textfeld z.B. "B" und es werden mir alle Einträge mit "B" angezeigt.
      Mache ich noch ein "e" dran (Be), werden mir alle mit "Be" angezeigt... Wähle ich dann eins aus und drücke "KOMMA & LEERTASTE", kann ich direkt ein
      weiteren Namen auswählen oder drücke z.B. "D" und es werden mir alle Eiunträge mit "D" angezeigt und ich kann die auswählen.

      So würde dann z.B. "Ben, Denny" in der Textbox stehen.

      Kommentar


      • #4
        Wozu Leertaste drücken? Wenn ein User ein Komma eingibt ist IMHO klar, dass ein neuer Eintrag gesucht werden soll.

        Kommentar


        • #5
          Ich vermute mal, dass in dem Beispiel "Ben, Denny" ein Eintrag/Datensatz ist. Das Komma + Leerzeichen gefolgt vom D soll vermutlich nur die Auswahl weiter eingrenzen.
          Sieht für mich nach einem klassischen AutoSuggest aus...
          Competence-Center -> Enjoy the Informatrix
          PHProcks!Einsteiger freundliche Tutorials

          Kommentar


          • #6
            Zitat von Arne Drews Beitrag anzeigen
            Ich vermute mal, dass in dem Beispiel "Ben, Denny" ein Eintrag/Datensatz ist. Das Komma + Leerzeichen gefolgt vom D soll vermutlich nur die Auswahl weiter eingrenzen.
            Sieht für mich nach einem klassischen AutoSuggest aus...
            Naja also ich hab halt verschiedene Namen in der Datenbank und die datalist rufe ich dann mit while() auf, so das so viele <option value=""> Einträge
            angezeigt werden wie es auch Namen gibt. Wenn ich dann also egal ob ich jetzt B oder D zu erst schreibe, sollen alle Namen angezeigt werden, die den Buchstaben enthalten und so weiter.

            Wenn ich also dann "KOMMA & LEERTASTE" drücke und ein weiteren Namen schreiben möchte, wird mir als bsp. "Ben, D...." (Denny || Dennis || Daniel usw.) angezeigt.
            Nun wähle ich "Denny" aus und im Input steht "Ben, Denny" ... wenn ich nun noch mal "KOMMA & LEERTASTE" mache und dann wieder "D", dann soll es so aussehen "Ben, Denny, D...." (Dennis || Daniel usw.)

            Ich hoffe das war verständlich ^^

            Ich möchte halt nur verhindern, dass mein Code wie oben beschrieben ein Zeichen zurück springt.
            Es funktioniert ja alles bis auf dieses eine kleine Problem, was einen echt nerven kann. Weil man halt wirklich jedes mal wie hier im bsp.
            (Ben,D) hinter das "D" gehen muss und wieder "LEERTASTE" drücken muss. Dann erst werden Namen vorgeschlagen.

            Kommentar


            • #7
              Ok, Problem wurde gelöst.
              Es lag einfach an dem
              Code:
              input.val(inputtrim);
              Das habe ich zu
              Code:
              input.val(inputtrim + " ");
              verändert und nun klappt es. Auch wenn die Einträge sich permanent neu laden und dadurch manchmal ein kleiner Grafik "Bug" entsteht.
              Aber es geht

              Kommentar


              • #8
                Was für ein Grafik bug ?
                Das sieht doch auch ganz guit aus, kann man ja auch mal was nachlesen:
                https://github.com/devbridge/jQuery-Autocomplete
                oder hier:
                http://demo.vickram.me/angular-auto-complete/

                Kommentar


                • #9
                  Ne, es ist wohl doch kein gewöhnlicher AutoSuggest. Er will tatsächlich in einem Feld mehrere Namen auswählen, getrennt durch Komma und Leerzeichen.
                  Der Clou soll wohl sein, dass bei weiteren Namen die bereits eingegebenen nicht erneut mit aufgelistet werden.
                  Competence-Center -> Enjoy the Informatrix
                  PHProcks!Einsteiger freundliche Tutorials

                  Kommentar


                  • #10
                    Hindert einen aber nicht dran, Lösungen andere Entwickler anzuschauen.
                    Da finde ich bspw.
                    String or RegExp, that splits input value and takes last part to as query for suggestions. Useful when for example you need to fill list of comma separated values.
                    https://github.com/devbridge/jQuery-Autocomplete



                    Kommentar


                    • #11
                      Also Arne Drews hat es verstanden was ich vor hab und auch jetzt geschafft hab. ^^
                      Mit dem kleineren Grafikbug kann ich leben... ist zwar nicht schön wenn er immer die ganzen Daten neu läd aber ich denke mal für das, was ich vor habe ist
                      das auch egal. ^^

                      Danke noch mal an alle die mir helfen wollten und geholfen haben.

                      Lg

                      Kommentar

                      Lädt...
                      X