Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
pete111 opened this issue Apr 20, 2020 · 1 comment
Open

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

pete111 opened this issue Apr 20, 2020 · 1 comment

Comments

@pete111
Copy link

pete111 commented Apr 20, 2020

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
Copy link

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...'
                });

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants