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>.<\/p>\n\n\n\n
First, let us consider how a <datalist> can be created with static data in simple HTML.<\/p>\n\n\n\n
Syntax:<\/p>\n\n\n\n
<datalist> ... <\/datalist>\n<\/pre>\n\n\n\nExample:<\/p>\n\n\n\n
<input type=\"text\" id=\"my_datalist_id\" list=\"my_datalist_list\"> \n <datalist id=\"my_datalist_list\"> \n <option value=\"Value 1\"> \n <option value=\"Value 2\"> \n <option value=\"Value 3\"> \n <option value=\"Value 4\"> \n <option value=\"Value 5\"> \n <option value=\"Value 4\"> \n<\/datalist>\n<\/pre>\n\n\n\nNow 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>.<\/p>\n\n\n\n
<input list=\"order_lines_datalist\" name=\"rma_order_line_search\" placeholder=\"Search for Order line data\"\/>\n <datalist id=\"order_lines_datalist\">\n <span t-set=\"order_lines\" t-value=\"website.get_orderlines()\"\/>\n <span t-foreach=\"order_lines\" t-as=\"orderline_id\">\n <option t-att-value=\"orderline_id.name\"><\/option>\n\t<\/span>\n <\/datalist>\n<\/pre>\n\n\n\nclass Website(models.Model):\n _inherit = \"website\"\n\n @api.model\n def get_orderline_rma_string(self):\n order_ids = self.env['sale.order.line].search([])\n return order_ids<\/pre>\n\n\n\n