从 datalist 元素中获取选定的值

Question

我正在尝试为自己的目的创建一个自动完成元素。基本上，我的指令创建一个输入，我在其中键入我的搜索和一个将存储我的服务器值的数据列表。

template: function (elem, attrs) {
    return '<input id="x" type="text" list="listing" /><datalist id="listing">' +
    '<option ng-repeat="item in resultFromServer"' +
    'label="myLabelValue" value="myTextValue" data-id="myIdValue" /></datalist>';
},
transclude: true,
link: function (scope, elem, attrs) {
    elem.children(0).bind('keyup', function () {
        var val = elem.children(0).val();
        var min = scope.$eval(attrs.minLength);

        if (val.length >= min) {
            doGetAsync(attrs.action, { searchFor: val }, function (result) {
                scope[resultFromServer] = result.Data;
                scope.$apply();
            });
        }
    });
}

研究进展顺利。

问题是：当我从该数据列表中选择<option> 时如何触发事件？当我从<datalist> 中选择任何值时，我想获取该选定值并将 id 存储到范围变量中。我该怎么做？

非常感谢！！！

Answer 1

你可以在 datalist 中添加一些除选项以外的文本，你不能在 datalist 中有选择更改类型事件。

您可以在 datalist 上绑定“输入”事件，并且在每个输入上，您可以使用列表值检查输入值。这样您就可以输入您输入的项目 ID、项目值等。