Create Datalist in Odoo

In this tutorial, I am going to show how we can create a <datalist> with dynamic data.  I will show this with reference to Odoo. We will see how we can add dynamic data in the <datalist> in Odoo.
The HTML <datalist> tag is used to provide an auto-complete feature on HTML elements. It provides a list of predefined options to the users to select data.  It can be used with <input> tag so that users can easily fill the data in the forms using select the data. The <datalist> tag should be used with an <input> element that contains a “list” attribute. The value of “list” attribute is linked with the “id” of the <datalist>.

First, let us consider  how a <datalist> can be created with static data in simple HTML.

Syntax:

<datalist> ... </datalist>

Example:

<input type="text" id="my_datalist_id" list="my_datalist_list">  
 <datalist id="my_datalist_list">  
    <option value="Value 1">  
    <option value="Value 2">  
    <option value="Value 3">   
    <option value="Value 4">   
    <option value="Value 5">   
    <option value="Value 4">   
</datalist>

Now we will consider an example in Odoo. We will consider that we are having a list of Orderlines and we will display the data of the Orderlines in the options of the <datalist>.

<input list="order_lines_datalist" name="rma_order_line_search" placeholder="Search for Order line data"/>
   <datalist id="order_lines_datalist">
      <span t-set="order_lines" t-value="website.get_orderlines()"/>
      <span t-foreach="order_lines" t-as="orderline_id">
           <option t-att-value="orderline_id.name"></option>
	</span>
   </datalist>

class Website(models.Model):
    _inherit = "website"

    @api.model
    def get_orderline_rma_string(self):
       order_ids = self.env['sale.order.line].search([])
       return order_ids

That is it.!!!
If you liked this post, It would be very grateful if you write your opinions, comments and suggestions to keep the post updated and interesting.
Thank you!