Forum PHP.pl > [JavaScript] Tagi w inpucie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Tagi w inpucie

bahh

23.10.2014, 15:49:22

Witam, potrzebuję skryptu działającego jak ten:
http://timschlechter.github.io/bootstrap-tagsinput/examples/

jako "Objects as tags"

czyli mamy tablicę typu:

1 : Jan
2: Adam
3: Wojtek
6: Jarek

i wpisujemy w inputa literke J, to wyświetli podpowiedzi Jan, Jarek, a gdy wybierzemy Jan, wartością przesyłaną w inpucie będzie nie Jan a 1 (liczba w tablicy przypisana do Jan). Rzecz jasna żeby po przecinku wprowadzać kolejne osoby.

Skrypt byłby na początku idealny, jednakże nie działa mi on w Chromie (mam na myśli wersję trzymaną na dysku) i też miałem problemy które są opisane w tym poście: http://forum.php.pl/index.php?showtopic=236022 także ze względu na niejasną dokumentacje, niezrozumiały kod szukam czegoś innego.

kpt_lucek

23.10.2014, 17:30:05

Select2

bahh

23.10.2014, 19:30:30

Mam coś takiego:
http://jsfiddle.net/yf71qgcc/

Jednakże wciąż nie śmiga, wie ktoś gdzie jest błąd?

kpt_lucek

23.10.2014, 21:10:08

Jsfiddle

#1: obiekty w tablicy:
BYŁO: { id: 54, text 'Jan Kowalski'}
JEST: { id: 54, text: 'Jan Kowalski'}

#2: Ładujesz plugin do inputa na $(document).ready() a tablicę danych dostarczasz podczas odczytu skryptu = jeszcze przed zdarzeniem .ready()

#3: drobnostki w jsfiddle podczas załączania plików css i js

Pozdrawiam

bahh

24.10.2014, 09:29:26

wszystko śmiga, chciałbym jednak, żeby po załadowaniu strony był np. tylko Jan Kowalski i Staś Stasiowaty

wiem że kasując linijkę $('#e21').select2('data', preload_data); po załadowaniu strony nie wyświetlą się wszystkie wartości w tablicy

kpt_lucek

24.10.2014, 16:31:50

Cytat(bahh @ 24.10.2014, 10:29:26 )

Ajax?

bahh

24.10.2014, 16:41:37

chcialbym uniknąć ajaxa, po prostu w tym inpucie jest np. VALUE="54,55" i wyświetla zgodnie z tablicą tam przesłaną przypisane tam imiona

kpt_lucek

24.10.2014, 18:05:03

[PHP] pobierz, plaintext 
<?php
$array = array(
    array(
        'id' => 123,
        'text' => "Janek"
    ),
    array(
        'id' => 124,
        'text' => "Franek"
    ),
);
?>
<html>
    <head>
        <!-- trochę kodu -->
    </head>
    <body>
        <script type="text/javascript">
            var preload_data = '<?php echo json_encode($array); ?>';
            $(document).ready(function () {
                $('#e21').select2({
                    multiple: true,
                    query: function (query) {
                        var data = {results: []};
                        $.each(preload_data, function () {
                            if (query.term.length == 0 || this.text.toUpperCase().indexOf(query.term.toUpperCase()) >= 0) {
                                data.results.push({id: this.id, text: this.text});
                            }
                        });
                        query.callback(data);
                    }
                });
                $('#e21').select2('data', preload_data);
            });
        </script>
    </body>
</html>
[PHP] pobierz, plaintext

Nie testowane

bahh

24.10.2014, 20:36:49

Podsunąłeś mi w sumie rozwiązanie, wykonałem je nieco inaczej ale bazowałem na twoim pomyśle. Dzięki wielkie za pomoc

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.