javascript - 从 Tagify 表单中清理/转义非法字符

Question

我有一个可用的 Python/Django 搜索表单，我需要将其与前端的 Tagify 集成，这样我的用户的搜索词就会变成标签。问题是我的搜索表单适用于 ?query=Bee 但不适用于 ?query=[{"value"%3A"Bee"}]。我想清理该请求，以便我的搜索表单能够再次工作。

HTML 表单

  <div class="form-group col-md-9 home-form">
      <input id="exampleFormControlInput5" type="text" name="query" placeholder="Type text to search"class="form-control form-control-underlined">
  </div>

  <div class="form-group col-md-3">
      <button type="submit"  id="searchsubmit" class="btn btn-xlarge rounded-pill btn-block shadow-sm">Go</button>
  </div>

</div>

下面代码中的白名单中的项目需要去除非法字符。

我的 html 页面上的 Tagify 脚本

   <script>

    var input = document.querySelector('input[name=query]'),

      // init Tagify script on the above inputs
      tagify = new Tagify(input, {
          // after 2 characters typed, all matching values from this list will be suggested in a dropdown
          whitelist : ["Bee", "Cat", "Mouse", "Chicken", "Duck"]
      })

  // "remove all tags" button event listener
  document.querySelector('.tags--removeAllBtn')
      .addEventListener('click', tagify.removeAllTags.bind(tagify))

  // Chainable event listeners
  tagify.on('add', onAddTag)
        .on('remove', onRemoveTag)
        .on('input', onInput)
        .on('edit', onTagEdit)
        .on('invalid', onInvalidTag)
        .on('click', onTagClick)
        .on('dropdown:show', onDropdownShow)
        .on('dropdown:hide', onDropdownHide)
        .on('dropdown:select', onDropdownSelect)

  // tag added callback
  function onAddTag(e){
      console.log("onAddTag: ", e.detail);
      console.log("original input value: ", input.value)
      tagify.off('add', onAddTag) // exmaple of removing a custom Tagify event
  }

  // tag remvoed callback
  function onRemoveTag(e){
      console.log(e.detail);
      console.log("tagify instance value:", tagify.value)
  }

  // on character(s) added/removed (user is typing/deleting)
  function onInput(e){
      console.log(e.detail);
      console.log("onInput: ", e.detail);
  }

  function onTagEdit(e){
      console.log("onTagEdit: ", e.detail);
  }

  // invalid tag added callback
  function onInvalidTag(e){
      console.log("onInvalidTag: ", e.detail);
  }

  // invalid tag added callback
  function onTagClick(e){
      console.log(e.detail);
      console.log("onTagClick: ", e.detail);
  }

  function onDropdownShow(e){
      console.log("onDropdownShow: ", e.detail)
  }

  function onDropdownHide(e){
      console.log("onDropdownHide: ", e.detail)
  }

  function onDropdownSelect(e){
      console.log("onDropdownSelect: ", e.detail)
  }


</script>

Answer 1

如果您已经在更新页面位置的输入元素上应用了 Tagify，为什么还需要使用 window.location.search 查询参数？

我的意思是，输入是否会触发页面刷新(提交时)并清除，而不是您唯一的选择是读取查询参数并使用它，将其应用到 Tagify 上？

您的查询搜索如何变成:query=[{"value"%3A"Bee"}]？
您是否只是将 tagify.value 作为查询的值，而不先更改它？