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

时间:2018-03-12 10:49:43

标签: javascript php jquery twitter-bootstrap jquery-tags-input

我正在使用this plugin创建自动填充和标记的组合功能。 我的输入字段代码和与之相关的脚本

<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,在用$ items替换source之后,autosuggest和tag功能停止工作。

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

任何人都可以告诉我如何用我的数据替换源代码,我希望它也能执行信件搜索。例如: - 如果我键入&#34; h&#34;那么以h开头的单词应该出现在autosuggest中,但是现在所有单词都包含&#34; h&#34;正在显示

1 个答案:

答案 0 :(得分:0)

您是否尝试使用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>