Pixabay / jQuery-tagEditor

A powerful and lightweight tag editor plugin for jQuery.
501 stars 164 forks source link

autocomplete remove item after selected, add item after removed #162

Open pete111 opened 4 years ago

pete111 commented 4 years ago

I use jquery tagEditor plugin with autocomplete. My code:

        var pLangs = ['ActionScript', 'AppleScript', 'Asp', 'BASIC', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'Python', 'Ruby', 'Scala', 'Scheme'];
        $('#demo2').tagEditor({
            autocomplete: { 
                minLength: 0, 
                delay: 0, 
                position: { collision: 'flip' }, 
                source: pLangs,//['ActionScript', 'AppleScript', 'Asp', 'BASIC', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'Python', 'Ruby', 'Scala', 'Scheme'], 
                create: function (event, ui) {
                    // open dialog on click
                    $(this).autocomplete("search", "");
                    //alert('cau');  
                }
            },
           beforeTagDelete: function(field, editor, tags, val) {
                v.splice($.inArray(val, pLangs), 1);
                alert(cCities);
                alert(val);
            },
            beforeTagSave: function(field, editor, tags, tag, val) {
                alert(val);
            },
            removeDuplicates: true,
            forceLowercase: false,
            delimiter: ", ",
            placeholder: 'Programming languages heeere...'

        });

I am trying to hide autocomplete item from shown list when this item is selected - my idea is to remove it from pLang variable so next autocomplete will not show it in list. And reverse, if I click on (x) of this item in inputbox (to remove it from input), this item should be added back to pLang in next autocomplete list to show.

how should I edit my code please?

SchoettleP commented 3 years ago

Hello @pete111, this solution should work for you:

                var pLangs = ['ActionScript', 'AppleScript', 'Asp', 'BASIC', 'C', 'C++', 'CSS', 'Clojure', 'COBOL', 'ColdFusion', 'Erlang', 'Fortran', 'Groovy', 'Haskell', 'HTML', 'Java', 'JavaScript', 'Lisp', 'Perl', 'PHP', 'Python', 'Ruby', 'Scala', 'Scheme'];

                var activeValues = pLangs;

                $('#allgemein-zeitraum').tagEditor({
                    autocomplete: {
                        minLength: 0,
                        delay: 0,
                        position: { collision: 'flip' },
                        source: activeValues,
                        create: function (event, ui) {
                            // this updates the source of the autocomplete every time you click into the tagEditor
                            $(this).autocomplete("option", { source: activeValues });
                            // open dialog on click
                            $(this).autocomplete("search", ""); 
                        }
                    },
                    beforeTagDelete: function (field, editor, tags, val) {
                        // Push deleted Tag back to the autocomplete
                        activeValues.push(pLangs.find(f => f == val));
                        // sort the values
                        activeValues.sort();
                    },
                    beforeTagSave: function (field, editor, tags, tag, val) {
                        // remove selected value from the autocomplete
                        activeValues = activeValues.filter(f => f != val)
                    },
                    removeDuplicates: true,
                    forceLowercase: false,
                    delimiter: ", ",
                    placeholder: 'Programming languages heeere...'
                });