javascript - 从 XML 实现 CSS 自动完成

标签 javascript php css xml

我正在尝试在 PHP 中解析 XML,然后将其作为一个对象放入 JavaScript 中以实现 CSS 自动完成。

我尝试在 PHP 中解析它并使用 json_encode($array) 将其作为对象放入 JavaScript 但它没有用。自动完成仅显示数字。

你必须把数据作为一个对象放在“数据”中。它必须是 "string": 'http://url' URL 用于缩略图。但我希望它是 "string": null。所以不会有缩略图。

这是来自 Materialise CSS 文档的示例:https://materializecss.com/autocomplete.html

  $(document).ready(function(){
    $('input.autocomplete').autocomplete({
      data: {
        "Apple": null,
        "Microsoft": null,
        "Google": 'https://placehold.it/250x250'
      },
    });
  });

我的 XML 文件:

<tittle>

<topic>
<name>PHP</name>
</topic>

<topic>
<name>JS</name>
</topic>

<topic>
<name>CSS</name>
</topic>

</tittle>

我的代码:

<!DOCTYPE html>
<html lang="en" >

<head>
 <meta charset="UTF-8">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
 <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>  
</head>

<body>

    <div class="row">
    <div class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <i class="material-icons prefix">textsms</i>
          <input type="text" id="autocomplete" class="autocomplete">
          <label for="autocomplete">Autocomplete</label>
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>



  <?php

  $xml = simplexml_load_file("xml.xml");

  $array = array();

  foreach($xml->topic as $topic)
  {
    $array[] = $topic->name;  
  }

  ?>


    <script >
    var array = <?php echo json_encode($array); ?>;
    console.log(array); 

  $(function () {
  $('input.autocomplete').autocomplete({
    data: array     

  });
});

</script>  
</body>  
</html>

console.log(array); 的输出:

自动完成仅显示数字 (0-2)。我认为这些数字是数组索引。

我想我必须将数组结构更改为 "string_from_array": null

请问有什么办法吗?谢谢回复

最佳答案

你可以换行

$array[] = $topic->name;

$array[$topic->name] = $topic->name;

这应该可以解决您的问题,但不是最好的方法。

关于javascript - 从 XML 实现 CSS 自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54751132/

相关文章:

PHP While 循环与最后一条记录?

更改主机时出现 PHP 错误

php - WordPress 的 ORM

css - 在右侧对齐列表的元素

javascript - 单击链接提交过滤器表单

javascript - 如何从 anchor 标记的 href 属性中隐藏#div

javascript - 获取 HTML 并插入到 DOM 中,但相对于特定路径进行解析

javascript - 在浏览器中使用 xml2js

javascript - Html 表(XML 绑定(bind)),带有用于编辑、删除、创建的命令按钮

css - 我的 JS Accordion 表现得很愚蠢——它到处乱跳