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>
解决方案
如果您已经在更新页面位置window.location.search
的输入元素上应用了 Tagify,为什么还需要使用查询参数?
我的意思是,输入是否会触发页面刷新(提交时)并清除,而不是您唯一的选择是读取查询参数并使用它,将其应用于 Tagify?
您的查询搜索是如何变成的:query=[{"value"%3A"Bee"}]
?
您是否只是简单地将tagify.value
其作为查询的值,而不先更改它?
推荐阅读
- php - 包含对象数组()的 stdClass 对象。如何计算嵌套对象中的元素
- r - 构建和安装创建的 R 包时出现问题
- sbt - 我可以使用托管在私有 git(不是 GitHub)中的模板运行 sbt new 命令吗?
- java - 在 Eclipse 中,modulepath 和 classpath 有什么区别?
- c# - Label.Text WindowsForms 中列表的平均值
- javascript - 如何设置用户脚本以在一系列网站上运行?
- .htaccess - 如何获取当前的 htaccess 目录
- python - socket.bind 方法有什么作用?
- jquery - 如何从 MVC C# 中的多个下拉列表中获取选定的值?
- c# - C# - 如何使用按钮代码从任务管理器关闭应用程序进程?