Question

我能够更改下面的代码，输出我点击进入控制台的内容。如您所见，sendItem函数为我做了这个。

我很难完成以下任务：

用户类型AP
autocomplete将其完成到Apple
用户点击APPLE
其对应的值将发送到控制台

基本上，物化有一个非常棒的功能，他们选择显示图片，当它可以做更多。例如，整个mySQL搜索基于：

使用当前待处理的客户端
每个客户端都是json客户端数组中的键/值对（数组）阵列）
autocomplete会搜索数据数组中的键以及用户点击，
调度ajax mysql搜索其中的相应值这种情况是唯一的客户端ID。
最后，我们将结果呈现给用户。

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

Answer 1

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

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

祝你好运。

<强>更新

现在，他们提供了自动完成文档，但是这可用于1.0.0-rc.2版本并查看文档 click here

Answer 2

嗯......你们会说这个解决方案是一点黑客吗？因为......出于某种原因，它对我来说并不令人满意。

也许我应该等待他们的框架进一步发展，然后去学习如何从头开始创建ajax实时搜索，这在Google上应该很难找到。

function sendItem_OLD(val) {
    console.log(val);
}

function sendItem(ele, e) {
    if (e.isTrigger != undefined) {
        console.log('Key: ' + ele.value + ' | Value: ' + $(ele).nextAll('.dropdown-content').find('img').attr('src'));
    }
}

$(function () {
    $('input.autocomplete').autocomplete({
        data: {
            "Apple": null,
            "John Doe": "465605",
            "Google": "http://placehold.it/250x250"
        },
        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" onchange="sendItem(this, event)">
                <label for="autocomplete-input">Autocomplete</label>
            </div>
        </div>
    </div>
</div>

从Materialise CSS自动完成中获取数据键/值对。怎么样？

2 个答案: