无法使用动态数据创建自动建议功能

Question

我正在使用此插件来创建自动完成和标记的组合功能。 我的输入字段代码和与之相关的脚本

<input id="form-tags-4" name="tags-4" type="text" value="">
<script type="text/javascript">
  $(function() {

    $('#form-tags-4').tagsInput({
      'autocomplete': {

        source: [
          'apple',
          'banana',
          'orange',
          'pizza'
        ]
      } 
    });
  });
</script>

它可以与静态数据很好地工作，但是我希望可以代替存储在源动态数据库中的静态数据来存储。

当前我的动态数据在$ normal_skill中，其格式如下

Array
(
    [0] => stdClass Object
        (
            [normal_skill] => HTML
        )

    [1] => stdClass Object
        (
            [normal_skill] => CSS
        )

    [2] => stdClass Object
        (
            [normal_skill] => Javascript
        )
)

我试图从normal_skill收集数据并将其放入这样的数组中

$items = array();
foreach($normal_skill as $n_skill) {
 $items[] = $n_skill->normal_skill;
}

在用$ items替换source后，我用$ items代替了source，自动建议和标记功能停止工作。

为了测试，我打印了$ items，它显示的是数据，但是当替换为source时，则没有数据。 控制台也未显示任何特定错误。

任何人都可以告诉我如何用我的数据替换源，并且我希望它也执行字母对字母的搜索。 例如：-如果我键入“ h”，则以h开头的单词应自动提示，但是现在所有包含“ h”的单词都将显示

Answer 1

您是否尝试过使用json_encode()将其传递给javascript？

<input id="form-tags-4" name="tags-4" type="text" value="">
<script type="text/javascript">
  $(function() {

    $('#form-tags-4').tagsInput({
      'autocomplete': {
        source: <?= json_encode($items) ?>
      } 
    });
  });
</script>

如果是远程源。

$items = array();
foreach($normal_skill as $n_skill) {
 $items[] = $n_skill->normal_skill;
}
exit(json_encode($items));

然后在您的JavaScript中，将其设置为源文件：

<script type="text/javascript">
  $(function() {

    $('#form-tags-4').tagsInput({
      'autocomplete': {
        source: './tags.php'
      } 
    });
  });
</script>