Как удалить URL-адрес изображения при автозаполнении в Materialise CSS? - PullRequest
0 голосов
/ 01 июля 2019

У меня есть этот метод JavaScript, который получает все мои данные из таблицы department с помощью API:

<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>

Меня беспокоит, как я могу удалить изображение, отображаемое при автозаполнении?

enter image description here

Что касается моего объекта, то только id и name , которые я включаю в свои модели

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

    public $id;
    public $name;

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

Это вывод console.log(departmentArray['records'][i]);

enter image description here

1 Ответ

0 голосов
/ 01 июля 2019

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 принимает простой массив строк, поэтому давайте создадим его из вашего ответа DepartmentArray, используя Карта массивов .

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

Кроме того, автозаполнение ожидает атрибут options source вместо data.

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