Reading list Switch to dark mode

    Create Datalist in Odoo

    Updated 16 July 2021

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

    Searching for an experienced
    Odoo Company ?
    Find out More
    <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!

     

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home