[JavaScript]Proponowane tagi z json Opcje

[Johnas]

Witam, mam taki kod:

[JAVASCRIPT] pobierz, plaintext 
var citynames = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('label'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: 'http://4um.pl/admin/templates/default/assets/modules/bootstrap-tagsinput/examples/assets/citynames.json',
            filter: function (list) {
                return $.map(list, function (cityname) {
                    return { name: cityname };
                });
            }
        }
    });
 
    citynames.initialize();
 
 
    $('#tag').tagsinput({
        typeaheadjs: ({
            hint: true,
            highlight: true,
            minLength: 1
        }, {
            name: 'citynames',
            displayKey: 'label',
            source: citynames.ttAdapter()
        })
    });
[JAVASCRIPT] pobierz, plaintext 

i owszem, działa jako input z tagami, ale nie wyskakują mi proponowane tagi... W momencie kiedy zmienię $('#tag').tagsinput({ na $('input').tagsinput({ to wyskakują mi tagi, pomimo że w html mam tak:

[HTML] pobierz, plaintext 
<div class="form-group row mb-4">
                      <label class="col-form-label text-md-right col-12 col-md-3 col-lg-3">Tagi</label>
                      <div class="col-sm-12 col-md-7">
                        <input type="text" class="form-control-lg form-control" style="width:100%" id="tag" data-role="tagsinput">
                      </div>
                    </div>
[HTML] pobierz, plaintext 

[Johnas]

Dodałem wszystkie moduły ze strony którą podałeś, ale i tak mam błędy w konsoli (IMG:style_emoticons/default/smile.gif) oto one:
(IMG:https://i.ibb.co/0V7Pf8P/konsola.png)

Dodam tylko, że proponowanie tagów mam w pliku custom.js i on nie generuje żadnych błędów...

Konsola:

Kod

ContentDispatcherService: no listeners for an event TAB_STATE__GET_NAVIGATION_METHOD
product-3-50.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
product-2-50.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
product-1-50.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
avatar-1.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
avatar-2.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
avatar-3.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
avatar-4.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
avatar-5.png:1          Failed to load resource: the server responded with a status of 404 (Not Found)
popper.min.js:4 Uncaught SyntaxError: Unexpected token 'export'
tooltip.js:1 Uncaught SyntaxError: Unexpected token '<'
simpleuploadadapter.js:12 Uncaught SyntaxError: Cannot use import statement outside a module
index.js:3 Uncaught TypeError: Cannot read properties of null (reading 'getContext')
    at index.js:3:45

Oto kod który powinien działać według wszelkiej dokumentacji ale nie działa bo u mnie w życiu nie może być łatwo.... ldlatego nosze tyle blizn na lewej ręce... każdą porażkę zamieniam w ból

[JAVASCRIPT] pobierz, plaintext 
/**
 *
 * You can write your JS code here, DO NOT touch the default style file
 * because it will make it harder for you to update.
 *
 */
 
"use strict";
$(document).ready(function () {
    /** Nadawanie uprawnień użytkownikowi */
    $("#user_select").on("change", function () {
        var val = $("#user_select").val();
        console.log(val);
 
        if (val == 1) {
            $("#rank_user").hide();
        } else {
            $("#rank_user").show();
        }
    });
 
    /** Tagi do bazy danych */
    var citynames = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
            url: 'http://4um.pl/admin/templates/default/assets/modules/bootstrap-tagsinput/examples/assets/citynames.json',
            filter: function (list) {
                return $.map(list, function (cityname) {
                    return { name: cityname };
                });
            }
        }
    });
 
    citynames.initialize();
 
    $('input').tagsinput({
        typeaheadjs: {
            name: 'citynames',
            displayKey: 'name',
            valueKey: 'name',
            source: citynames.ttAdapter()
        }
    });
 
    ClassicEditor
        .create(document.querySelector('.editor'), {
 
            licenseKey: '',
            ckfinder: {
                uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
            },
            toolbar: ['find', 'replace', '|', 'styles', 'format', 'font', 'fontSize', '|', 'templates', 'ckfinder', 'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo']
 
        })
        .then(editor => {
            window.editor = editor;
 
 
 
 
        })
        .catch(error => {
            console.error('Oops, something went wrong!');
            console.error('Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:');
            console.warn('Build id: 3v2v0d6fl86w-u9qe9eh2gz51');
            console.error(error);
        });
 
});
 
[JAVASCRIPT] pobierz, plaintext 

o to cały genialny plik custom.js I wiecie co? nie dodaje on żadnego tagu.... ncdkfWEISDMOFSMLPO[F WEAKJH


a to plik citynames.json

Kod

[ "Amsterdam",
  "London",
  "Paris",
  "Washington",
  "New York",
  "Los Angeles",
  "Sydney",
  "Melbourne",
  "Canberra",
  "Beijing",
  "New Delhi",
  "Kathmandu",
  "Cairo",
  "Cape Town",
  "Kinshasa"
]

lco jest nie tak?


Udało mi się w końcu dodać te tagi, ale mam problem ponieważ select chowa się w inpucie i nie wiem jak ustawić jego z-index w taki sposób aby był widoczny. (IMG:https://i.ibb.co/hXz1Qmr/tagi.jpg)

CSS dla elementu który powinien być widoczny...

Kod

element.style {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 2147483647;
    display: block;
    z-index: 2222222222222222;
}

oraz CSS dla inputa:

Kod

.bootstrap-tagsinput {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    display: inline-block;
    padding: 4px 6px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
    z-index: auto;
}

Edit: zrobiłem... wystarczyło dodać

Kod

overflow: unset!important;

natomiast mam inny problem gdy zamieniam citynames.json który wygląda tak:

Kod

[ "Amsterdam",
  "London",
  "Paris",
  "Washington",
  "New York",
  "Los Angeles",
  "Sydney",
  "Melbourne",
  "Canberra",
  "Beijing",
  "New Delhi",
  "Kathmandu",
  "Cairo",
  "Cape Town",
  "Kinshasa"
]

na mój php który wygląda tak:

Kod

?[ "Zachod slonca",
  "ksiezyc"
]

i wiecie co? skrypt przestaje działać?
kod js

Kod

"use strict";

var citynames = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: 'tags.json',
        filter: function(list) {
            return $.map(list, function(cityname) {
                return { name: cityname }; });
        }
    }
});
citynames.initialize();

//$(".inputtags").tagsinput('items');

$(".inputtags").tagsinput({
    typeaheadjs: {
        name: 'citynames',
        displayKey: 'name',
        valueKey: 'name',
        source: citynames.ttAdapter()
    }
});

nie mam już pojęcia... całą noc z tym walczę

Ten post edytował Johnas 5.04.2022, 07:50:40