tagEditor 选择后未选择标签

Question

我有输入标签

当我选择它时，它只选择字母的一部分，而不是整个标签。

我试过了

$('#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).'"' ?>]

});

注意：

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

---

返回

"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 "

Answer 1

你的意思是当用户输入第一个字母然后按回车的时候？

如果是这样，您可以通过在beforeTagSave 回调中返回false 来移除不在源列表中的标签。

像这样：

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>

如果不是这种情况，请创建一个可以重现问题的有效 sn-p。