Question

我有这个JavaScript方法，可以使用API从department表中获取所有数据：

<script type="text/javascript">
  $(document).ready(function() {
      //Autocomplete
      $(function() {
        $.ajax({
          type: 'GET',
          url: 'http://127.0.0.1/EnrollmentSystem/api/department/read.php',
          success: function(response) {
            var departmentArray = response;
            var dataDepartment = {};
            //console.log(departmentArray['records']['0'].name);
            console.log(departmentArray['records'].length);
            for (var i = 0; i < departmentArray['records'].length; i++) {
              console.log(departmentArray['records'][i]);
              dataDepartment[departmentArray['records'][i].name] = departmentArray['records'][i].name; //departmentArray[i].flag or null
            }
            $('input.autocomplete_department').autocomplete({
              data: dataDepartment,
            });
          }
        });
      });
  });
</script>

我正在使用此页面在我的页面上调用它：

<div class="row lt-row-content input-field">
    <div class="col s12 m3 l3 lt-input-field">Department</div>
    <div class="col s12 m8 l8 lt-input-field"><input type="text" name="" id="autocomplete-input" class="autocomplete_department lt-input-field"></div>
</div>

我担心的是如何删除自动完成显示的图像？

至于我的对象，只有我包含在模型中的 id 和名称

class Department{
    private $conn;
    private $table_name = "department";

    public $id;
    public $name;

    public function __construct($db){
        $this->conn = $db;
    }
...

这是console.log(departmentArray['records'][i]);

的输出

Answer 1

const departmentArray = {
  records: [
    { id: 1, name: 'DEPARTMENT 1' },
    { id: 2, name: 'DEPARTMENT 2' },
    { id: 3, name: 'DEPARTMENT 3' },
    { id: 4, name: 'DEPARTMENT 4' },
  ]
}

const dataDepartment = departmentArray.records.map(record => record.name);

$('#input').autocomplete({
  source: dataDepartment
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
  
<input id="input" type="text">

autocomplete文档接受一个简单的字符串数组，因此让您使用Array map从departmentArray响应中创建它。

var dataDepartment = departmentArray.records.map(record => record.name);

此外，自动填充功能期望选项属性为source而不是data。

$('input.autocomplete_department').autocomplete({
  source: dataDepartment
});

Answer 2

正在寻找与原始帖子类似的答案。如果原始帖子是关于 Jquery 自动完成的，则 camaulay 给出的答案是正确的。它不是。最初的帖子是关于 Materializecss 自动完成的，它应该是数据而不是自动完成元素列表的来源。 `
// 从 https://materializecss.com/autocomplete.html

复制/粘贴

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

参见 "Apple": null - null 值是在 Materializecss 自动完成中抑制图像的方法。

如何在Materialize CSS中的自动完成功能上删除图像URL？

2 个答案: