Search code examples
javascriptjquerycssinputjquery-tageditor

tagEditor is not selecting the tag after selected

I have input tags

enter image description here

When I select it, it only selects the part of the letter, but not the entire tag.

I've tried

$('#tags').tagEditor({

    autocomplete: {
        delay: 0,
        position: { collision: 'flip' },
        source: [<?php echo '"'.implode('","', $skillList).'"' ?>]
    },
    forceLowercase: false,
    delimiter: ',', /* space and comma */
    placeholder: 'Enter tags ...',
    initialTags: [<?php echo '"'.implode('","', $tags).'"' ?>]

});

Note :

<?php echo '"'.implode('","', $skillList).'"' ?>

return

"Vagrant","Docker","Gulp","Heroku","RequireJS","AngularJS","Composer ","NPM","MySQL","Sublime Text","Laravel","PyCharm","Mac OS X","Windows","Ubuntu","Cent OS","Photoshop","Illustrator","MobaXTerm","Terminal","iMovie","Final Cut","GitHub","BitBucket","Selenium","Python","Bower","Sass","Digital Ocean","Linode","Siteground","Go Daddy","Shopify","Facebook","Twitter","Salesforce","OAuth 2.0","SAML 2.0","OpenID Connect","PostgreSQL","Bash","PHP","Google Map","Google Translation","Instagram","LESS","Geolocation API","Xcode","Atom","Webpack","AWS Console","Secure Shell","Node","Yarn","Pod","EC2","Amazon ECS","S3","Amazon RDS","Camtasia","Core Data","Realm","VS Code","TextMate","TextWrangler","Laravel Elixir","Virtual Machine","Open Stack","Redis","Local Storage","Protractor","Jest","Mocha","Chai","SinonJS","HTML","CSS","Javascript","Sketch","iOS","Express","Angular","React Native","jQuery","Nginx","Apache","PayPal","Square ","Disqus","YouTube","Swagger","GitLab","Amazon ECR ","Jira","Trello ","Evernote ","Confluence ","Word","CodeBox","Markdown","Noteability","Kamar","Jasmine","Swift","Coda","Postman","Wireshark","Transmit","WinSCP","Navicat Premium","Kaleidoscope","Mind Note ","Divvy","Duet","Draw.io","Google Draw","VMWare Fusion ","Virtualbox","QuickBooks","Chat.io","FusionCharts","Google Chart","J Player","CKEditor","Alimofire","Sucuri","Cloudflare","Digicert","Chart.js","Mailchimp","Balsamic Mockup "
Solution

  • Do you mean when the user type the first letter and then press enter for example?

    If so, you can remove tags which are not in the source list by return false in the beforeTagSave callback.

    Like this:

    const source = ['ActionScript', 'AppleScript', 'Asp', ...'Python', 'Ruby'];

$('#demo2').tagEditor({
  autocomplete: {
    delay: 0, // show suggestions immediately
    position: {
      collision: 'flip'
    }, // automatic menu position up/down
    source
  },
  forceLowercase: false,
  placeholder: 'Programming languages ...',
  initialTags: ['ActionScript', 'AppleScript'],
  beforeTagSave: (field, editor, tags, tag, val) => {
    return source.includes(val) && val;
  }
});
    <link href="https://goodies.pixabay.com/jquery/tag-editor/jquery.tag-editor.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<script src="https://goodies.pixabay.com/jquery/tag-editor/jquery.caret.min.js"></script>
<script src="https://goodies.pixabay.com/jquery/tag-editor/jquery.tag-editor.js"></script>

<div id="demo2"></div>

    If it's not the scenario, please create a working snippet which reproduce the issue.