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

Question

我想在javascript的数据列表中获取所选项目的值。 由于我对工作的流星，我有获得在所选择的数据值的要求， 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>

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

提前致谢..

Answer 1

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

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

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

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

    // do something with value
  },
});

查看此流星教程，以了解有关表单处理的更多信息。