javascript - 从 Materialise CSS 自动完成中获取数据键/值对。如何？

Question

我能够更改下面的代码以将我单击的内容输出到控制台。正如您所看到的，sendItem 函数为我完成了这项工作。

我很难完成以下任务:

1. 用户类型 AP
2. 自动完成功能将其补全给 Apple
3. 用户点击 APPLE
4. 将其对应的值发送到控制台

基本上，Materialize 有一个非常棒的功能，他们选择用它来显示图片，而且它可以做更多的事情。例如，整个 mySQL 搜索基于:

1. 加载当前待处理客户的自动完成数据
2. 每个客户端都是 json 客户端数组中的键/值对(数组数组)
3. 自动完成功能根据用户搜索数据数组中的键点击，
4. 调度 ajax mysql 搜索其相应的值，其中本例是一个唯一的客户端 ID。
5. 最后，我们将结果呈现给用户。

function sendItem(val) {
    console.log(val);
}

$(function () {
    $('input.autocomplete').autocomplete({
        data: {
            "Apple": null,
            "Microsoft": null,
            "Google": 'http://placehold.it/250x250'
        },
        onAutocomplete: function(txt) {
          sendItem(txt);
        },
        limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    });

});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>


<div class="row">
    <div class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <input type="text" id="autocomplete-input" class="autocomplete">
                <label for="autocomplete-input">Autocomplete</label>
            </div>
        </div>
    </div>
</div>

Answer 1

插件中似乎没有关于此的文档。因此，一种解决方案是根据所选值(onAutocomplete 函数的 txt 参数)自行执行搜索。

因此，保留一个映射键和值的数据结构，类似于传递给插件的 data 选项，一旦选择了某个值，您就可以使用它在您的数据结构并执行您想要的操作。

祝你好运。

更新

现在他们使用 css 来提供自动完成的文档，但这适用于版本 1.0.0-rc.2 并查看文档 click here