[英]How to highlight result of a search in Flask/HTML?
I m trying to create a search box Using HTML and Flask framework from Python.我正在尝试使用来自 Python 的 HTML 和 Flask 框架创建一个搜索框。 I have the following layout: Layout我有以下布局:布局
I want to take the input of the search box and highlight it in the text zone !我想输入搜索框并在文本区域中突出显示它! I want to perform a search in the same HTML page !我想在同一个 HTML 页面中进行搜索!
For example if I type: "544" the last line will be highlighted.例如,如果我输入:“544”,最后一行将突出显示。
I m filling the box automatically with content of a list: Python script:我用列表的内容自动填充框: Python 脚本:
@app.route('/update_loc_debug', methods=['POST'])
def update_loc_debug():
loc_debug = ''
if loc_debug_msg not in loc_list:
loc_list.append(loc_debug_msg)
for i in range(len(loc_list)):
loc_debug= loc_debug + "\n" + loc_list[i]
return jsonify('', render_template('update_loc_debug.html', loc_debug=loc_debug))
This is the part responsible of filling the box in HTML:这是HTML中负责填框的部分:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"> </script>
<script>
$(function(){
window.setInterval(function(){
loadNewLocDebug()
},3000)
function loadNewLocDebug(){
$.ajax({
url:"/update_loc_debug",
type: "POST",
dataType: "json",
success: function(data){
$(loc_debug).replaceWith(data)
}
});
}
});
</script>
<div class="loc-debug-title">
Loc Debug UART
</div>
<div id="loc_debug" class="textzone3">
{{ loc_debug }}
Can you please suggest any possible solution?你能建议任何可能的解决方案吗? or documentation.或文档。 Do I have to use a search form or I can perform the search using live data.我是否必须使用搜索表单,或者我可以使用实时数据执行搜索。
Thanks!谢谢!
Your textzone looks like a textarea.您的文本区域看起来像一个文本区域。 If you don't need users to edit the contents of the textzone, then you don't actually need a textarea.如果您不需要用户编辑 textzone 的内容,那么您实际上不需要 textarea。 You can simply use a list element <ul>
with each text coming in as a list item <li>
which means you can style the <li>
for the most recent entry differently eg maybe give it a class called 'active' and then style it how you want您可以简单地使用列表元素<ul>
,每个文本都作为列表项<li>
进入,这意味着您可以为最近的条目设置不同的<li>
样式,例如可以给它一个名为“活动”的 class 然后设置样式它是你想要的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.