Sanitise / Escape illegal characters from Tagify form

Question

I have a working Python/Django search form that I need to integrate with Tagify on the front end, so my user's search terms are turned into tags. The problem is my search form works with ?query=Bee but not ?query=[{"value"%3A"Bee"}] . I would like to sanitize the request so my search form will work again.

HTML Form

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

It's the items in the whitelist in the code below that need stripped of illegal characters.

Tagify Script on my html page

   <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

Why do you need to use the window.location.search query param if you already apply Tagify on the input element which updates the location of the page?

I mean, does the input triggers a page refresh (when submitted) and the gets cleare, and not your only option is to read the query param and work with it, applying it on the Tagify?

How did your query search had become: query=[{"value"%3A"Bee"}] ?
Did you simply places tagify.value as the query's value, without changing it first?