清理/转义标签表单中的非法字符

Question

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

网页表单

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

Answer 1

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

我的意思是，输入是否触发页面刷新(提交时(并且变得清晰，而不是您唯一的选择是阅读查询参数并使用它，将其应用于 Tagify？

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