使用txt文件中的有限选项制作javascript标记生成器

我正在尝试制作一个标签工具，使用JavaScript（比如LinkedIn或Upwork）将技能添加为标签，在这里输入与您的个人资料相匹配的所有技能。 如何限制txt文件中数据的可用选项

例如： txt文件：

程序设计 写 音乐 教学

然后，唯一可用的添加选项是：编程、写作、音乐和教学用户不能添加额外的标签

以下是当前代码：

<div id ="app" class="tags-input" data-name="tags-input"></div>
<script type="text/javascript">
  [].forEach.call(document.getElementsByClassName('tags-input'), function (el) {
    let hiddenInput = document.createElement('input'),
    mainInput = document.createElement('input'),
    tags = [];

    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', el.getAttribute('data-name'));

    mainInput.setAttribute('type', 'text');
    mainInput.classList.add('main-input');
    mainInput.addEventListener('input', function () {
      let enteredTags = mainInput.value.split(',');
      if (enteredTags.length > 1) {
        enteredTags.forEach(function (t) {
          let filteredTag = filterTag(t);
          if (filteredTag.length > 0)
            addTag(filteredTag);
        });
        mainInput.value = '';
      }
    });

    mainInput.addEventListener('keydown', function (e) {
      let keyCode = e.which || e.keyCode;
      if (keyCode === 8 && mainInput.value.length === 0 && tags.length > 0) {
        removeTag(tags.length - 1);
      }
    });

    el.appendChild(mainInput);
    el.appendChild(hiddenInput);

    function addTag (text) {
      let tag = {
        text: text,
        element: document.createElement('span'),
      };

      tag.element.classList.add('tag');
      tag.element.textContent = tag.text;

      let closeBtn = document.createElement('span');
      closeBtn.classList.add('close');
      closeBtn.addEventListener('click', function () {
        removeTag(tags.indexOf(tag));
      });
      tag.element.appendChild(closeBtn);

      tags.push(tag);

      el.insertBefore(tag.element, mainInput);

      refreshTags();
    }

    function removeTag (index) {
      let tag = tags[index];
      tags.splice(index, 1);
      el.removeChild(tag.element);
      refreshTags();
    }

    function refreshTags () {
      let tagsList = [];
      tags.forEach(function (t) {
        tagsList.push(t.text);
      });
      hiddenInput.value = tagsList.join(',');
    }

    function filterTag (tag) {
      return tag.replace(/[^\w -]/g, '').trim().replace(/\W+/g, '-');
    }
  });
</script>

---

所以我找到了一个解决办法。 这不是非常有效或完美的解决方案，但它满足了我的需要。 如果有人需要，这是代码。 希望能有帮助

<div id ="app" class="tags-input" data-name="tags-input"></div>
<script type="text/javascript">
let lines;
$.get('skills.txt',{},function(content){
    lines=content.split('\n');

    console.log(`"file.txt" contains ${lines.length} lines`)
    console.log(`First line : ${lines[0]}`)
});

[].forEach.call(document.getElementsByClassName('tags-input'), function (el) {
    let hiddenInput = document.createElement('input'),
    mainInput = document.createElement('input'),
    tags = [];

    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', el.getAttribute('data-name'));

    mainInput.setAttribute('type', 'text');
    mainInput.classList.add('main-input');
    mainInput.addEventListener('input', function () {
        let enteredTags = mainInput.value.split(' ');
        if (enteredTags.length > 1) {
            enteredTags.forEach(function (t) {
                let filteredTag = filterTag(t);
                if (filteredTag.length > 0)
                    addTag(filteredTag);
            });
            mainInput.value = '';
        }
    });

    mainInput.addEventListener('keydown', function (e) {
        let keyCode = e.which || e.keyCode;
        if (keyCode === 8 && mainInput.value.length === 0 && tags.length > 0) 
{
            removeTag(tags.length - 1);
        }
    });

    el.appendChild(mainInput);
    el.appendChild(hiddenInput);

    function addTag (text) {
        let tag = {
            text: text,
            element: document.createElement('span'),
        };

        tag.element.classList.add('tag');
        tag.element.textContent = tag.text;

        let closeBtn = document.createElement('span');
        closeBtn.classList.add('close');
        closeBtn.addEventListener('click', function () {
            removeTag(tags.indexOf(tag));
        });
        tag.element.appendChild(closeBtn);
        var available = 0;
        for (var i = lines.length - 1; i >= 0; i--) {
            if(lines[i]==tag.text){
                available = 1;
            }
        }
        var exists = 0;
        for (var i = tags.length - 1; i >= 0; i--) {

            if (tags[i].text==tag.text) {
                exists = 1;
            }
        }
        if (exists == 0 && available == 1) {
            tags.push(tag);

            el.insertBefore(tag.element, mainInput);

            refreshTags();
        }
    }

    function removeTag (index) {
        let tag = tags[index];
        tags.splice(index, 1);
        el.removeChild(tag.element);
        refreshTags();
    }

    function refreshTags () {
        let tagsList = [];
        tags.forEach(function (t) {
            tagsList.push(t.text);
        });
        hiddenInput.value = tagsList.join(',');
    }

    function filterTag (tag) {
        return tag.replace(/[^\w -]/g, '').trim().replace(/\W+/g, '-');
    }
});

</script>

别忘了在头部包含jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

---

因此，基本上可以归结为，您需要一个数据库、一个json文件或其他方法来存储您希望用户能够选择的所有标记。这样，重复很容易避免，用户自己也不能添加新的标记。@Shilly我有一个json文件，但我不能将该文件链接到javascript代码。关于如何完成或需要编辑代码的哪一部分，有什么建议吗？嗨，Youhanna，我已经整理了你的帖子。你在这里问了很多问题。StackOverflow在您关注一个主要问题时得到了最好的利用。如果您在托管网站的同一位置托管json文件，您可以通过简单的ajax调用获得该文件。如果标签可以硬编码，也可以在代码中使用变量。嗨@AlexanderWigmore，我注意到了，非常感谢。很抱歉，我是新来的：D，问题是这些问题有点相关，或者可以一起解决，这就是为什么我认为一起问这些问题有助于说明我在寻找什么。