jquery 自动完成，如何填充到 HTML

Question

我正在尝试获取 HTML 以显示从我的自动完成 ajax 查询返回的建议。我试图找到这方面的教程，但没有一个真正解释数据如何从 php 发送的 JSON 到 jquery 再到 HTML。

php函数：

function autoCompany($keyword){
global $DBH;


$stmt = "SELECT companyID, companyName FROM Company WHERE companyName LIKE '%' ? '%'";

try{
    $STH = $DBH->prepare($stmt);
    $STH->bindParam(1, $keyword);
    $STH->execute();

    if($STH->RowCount() > 0){

            $suggestions = array(); 
        while($row = $STH->fetch()){
            $suggestions[] = array(
            "label" => $row['companyName'],
            "value" => $row['companyID']
            );
        }

        echo json_encode(array('suggestion' => $suggestions));
    }else{
        echo 'failed';
    }

}catch(Exception $e){
  echo $e->getMessage() . "autoCompany";
}
}

我知道数据发送正确：

suggestion: [{value:Test Company, data:1}, {value:Testing Test, data:4}]
 0: {value:Test Company, data:1}
 1: {value:Testing Test, data:4}

但是如何让数据输出到下拉列表中呢？

我的 HTML：

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">AutoComplete</label>
<div class="col-md-6 col-sm-6 col-xs-12">
   <input type="text" name="country" id="autocomplete" class="form-control col-md-10" style="float: left;" />
   <div class="autocomplete-suggestions">
       <div class="autocomplete-suggestion autocomplete-selected">...</div>
       <div class="autocomplete-suggestion">...</div>
       <div class="autocomplete-suggestion">...</div>
   </div>
</div>
</div>

我的自动完成 jquery：

$('#autocomplete').autocomplete({
  serviceUrl: 'Admin/ajax.admin.php',
  paramName: "autoCompany",
  type: "POST",
  dataType: "json",
  onSelect: function (suggestion) {
      alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
  }success: function (data) {
  response($.map(data.d, function (i) {
      return {
          //From Here to DDL?
      }
     }))
  },
 });

Answer 1

如果您正在寻找它来填充它自己创建的下拉列表，您需要像这样映射您的 JSON 数据。

response($.map(data.d, function (i) {
      return {
          label: i.value,
          value: i.data
      }
}