如何突出显示Flask/HTML中的搜索结果

Question

我正在尝试使用Python中的HTML和Flask框架创建一个搜索框。我有以下布局：布局

我想接受搜索框的输入，并在文本区域中突出显示它！我想在同一个HTML页面中执行搜索！

例如，如果我键入："；544〃；最后一行将突出显示。

我正在用列表的内容自动填充框：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))

这是负责用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 }}

你能提出任何可能的解决方案吗？或文档。我必须使用搜索表单还是可以使用实时数据进行搜索。

谢谢！

Answer 1

您的文本区域看起来像一个文本区域。如果不需要用户编辑文本区域的内容，那么实际上就不需要文本区域。你可以简单地使用列表元素<ul>，每个文本都作为列表项<li>输入，这意味着你可以为最近的条目设置不同的<li>样式，例如，给它一个名为"active"的类，然后按照你想要的样式设置