How to highlight result of a search in Flask/HTML?

Question

I m trying to create a search box Using HTML and Flask framework from Python. 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 !

For example if I type: "544" the last line will be highlighted.

I m filling the box automatically with content of a list: Python script:

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

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

Answer 1

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