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

我有一个工作正常的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页面上标记脚本

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

最佳答案

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

我的意思是，输入是否触发页面刷新（提交时）和获取清除，不是您唯一的选择就是读取查询参数并对其进行处理，并将其应用于Tagify？

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

关于javascript - 从Tagify表单中清理/转义非法字符，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58282001/