如何在Javascript中获取在datalist中选择的数据的值？

Question

我想在javascript中获取datalist中所选项目的值。当我正在研究meteor时，我需要在datalist中获取所选数据的值。

我的代码是：

<input type="text" list="d1" id="search" name="browser" placeholder="Search By">
<datalist id="d1">
    {{#each searched_item}}
       <option value={{this}}>{{this}}\</option>
    {{/each}} 
</datalist>

这是我模板中的代码，我在流星中使用了我的表单。这里的search_item是我在流星中的js文件中用helper调用的函数。现在我需要在javascript中的datalist中获取所选项目的值。

先谢谢..

Answer 1

您需要在模板中创建一个事件处理程序来处理表单提交。然后使用事件对象从您的datalist获取值。

请记住，datalist只为文字输入提供自动填充功能。所以你只需要在表单中获得文本输入的值。由于您希望在选择数据列表后立即使用该值，因此您可以使用input事件。

这是一个例子。只需将myTemplate更改为模板名称即可。

Template.myTemplate.events({
  'input #search'(event) { 
    // get value for text input
    const value = event.currentTarget.value;

    // do something with value
  },
});

查看此meteor tutorial以了解有关表单处理的更多信息。