使用JavaScript的append方法时HTML Datalist出现重复条目问题

我找到一个用JavaScript填充HTML Datalist的示例，运行正常，但当我尝试从本地数据库获取数据填充datalist时，出现了重复条目。

输入表单代码 #

<div id="page-wrapper">
    <h1>HTML Datalist with AJAX</h1>

    <label for="ajax">Pick an HTML Element (options loaded using AJAX)</label>
    <input type="text" id="ajax" list="json-datalist" placeholder="e.g. datalist" autocomplete="off" onfocus="this.value=''" onchange="this.blur();" oninput="myFunction(this.value)">
    <datalist id="json-datalist"></datalist>
</div>

JavaScript代码 #

function myFunction(term) {
  //alert(term);
  var dataList = document.getElementById('json-datalist');
  var input = document.getElementById('ajax');
  //alert(input);
  // Create a new XMLHttpRequest.
  var request = new XMLHttpRequest();

  // Handle state changes for the request.
  request.onreadystatechange = function(response) {
    if (request.readyState === 4) {
      if (request.status === 200) {
        // Parse the JSON
        var jsonOptions = JSON.parse(request.responseText);
        //console.log(jsonOptions)

        // Loop over the JSON array.
        jsonOptions.forEach(function(item) {

          // Create a new <option> element.
          var option = document.createElement('option');
          // Set the value using the item in the JSON array.
          option.value = item;

          // Add the <option> element to the <datalist>.
          dataList.appendChild(option);

        });

        // Update the placeholder text.
        input.placeholder = "e.g. datalist";
      } else {
        // An error occured :(
        input.placeholder = "Couldn't load datalist options :(";
      }
    }
  };

  // Update the placeholder text.
  input.placeholder = "Loading options...";

  // Set up and make the request.
  request.open('GET', RecipesBaseUrl + 'Ajax/fetchDirections/' + term, true);
  //request.open('GET', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/html-elements.json', true);
  request.send();
}

CakePHP后端脚本 #

public function fetchDirections($term=null) {
    $this->autoRender=false;
    //$this->request->allowMethod('ajax');
    $this->request->allowMethod('get');
    $term = $this->request->getQuery('term');
    $directions = $this->fetchTable('Directions');
    $query=$directions->find()
        //->select(['Directions.id','Directions.name'])
        ->select(['Directions.name'])
        ->where(['Directions.name like'=>'%'.$term.'%','Directions.directiontype_id = '=>1, 'Directions.directionstate_id ='=>3])
        ->order(['Directions.name'=>'ASC'])
        ->limit(10)
        ->all()
        ->extract('name');

    return $this
        ->response
        ->withType('application/json')
        ->withStringBody(json_encode($query,JSON_UNESCAPED_UNICODE));
    exit();
}

我猜测需要将JavaScript中的append方法替换为其他方法，或者在填充新搜索结果前清空datalist，能否给我一些解决提示？

内容的提问来源于stack exchange，提问作者Dirk