使用 json 数据填充 Materialize 自动完成功能答案

【问题标题】：Populate Materialize autocomplete with json data使用 json 数据填充 Materialize 自动完成功能
【发布时间】：2017-04-06 13:01:21
【问题描述】：

我正在为一个项目构建一个小网站，我一直在寻找如何使用 Materialize 插件填充我的自动完成输入的几个小时。我对 json 或 ajax 不是很熟悉，所以我真的很痛苦。文档中的原始示例带有静态数据：

$('input.autocomplete').autocomplete({
data: {
  "Apple": null,
  "Microsoft": null,
  "Google": 'http://placehold.it/250x250'
},
limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
onAutocomplete: function(val) {
  // Callback function when value is autcompleted.
},
minLength: 1, // The minimum length of the input for the autocomplete to start. Default: 1.
});

我的愿望是从我的数据库中获取动态数据。我正在使用此 php 代码来执行此操作：

<?php
        $query = $arg;
        echo $query;

        $json_output = array();
        $reponse = $bdd->query("SELECT CPnom FROM competence where CPnom LIKE ". $query);

        while ($donnees = $reponse->fetch()) {
                     $json_output[] = $donnees[0]. ": null";
                        }

        return json_encode($json_output);
?>

我假设代码正在运行，因为它显示了与我的数据库数据匹配的 ["JAVA":null, "js":null, "C":null]。知道如何将此 json 数据放入此数据参数而不是静态名称吗？

data: {
  "Apple": null,
  "Microsoft": null,
  "Google": 'http://placehold.it/250x250'
}

感谢您的宝贵时间！

【问题讨论】：

标签： javascript php json ajax materialize

【解决方案1】：

  var data_2 = JSON.parse(sessionStorage.getItem('key_1'));

    $(function() {

      $('input.autocomplete').autocomplete({
        data: data_2,

    limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    onAutocomplete: function(val) {

      // Callback function when value is autcompleted.
    },
    minLength: 2 // The minimum length of the input for the autocomplete to start. Default: 1.

      });
    });

【讨论】：