使用 jQuery 自动完成 JSON 数据答案

【问题标题】：AutoComplete with JSON data using jQuery使用 jQuery 自动完成 JSON 数据
【发布时间】：2017-09-15 08:33:16
【问题描述】：

我正在尝试添加一个自动完成输入文本框，它将使用 Pipedrive API 检索数据。

我从 Pipedrive 得到的 JSON 响应如下：-

{
  "success": true,
  "data": [{
    "id": 1671,
    "title": "Queens Park Tyres deal"
  }, {
    "id": 1672,
    "title": "Wildman Craft Lager deal"
  }, {
    "id": 1673,
    "title": "General Store deal"
  }, {
    "id": 1674,
    "title": "Deluxe Off Licence deal"
  }, {
    "id": 1675,
    "title": "Ahmed Halal Bazaar deal"
  }],
  "additional_data": {
    "pagination": {
      "start": 0,
      "limit": 5,
      "more_items_in_collection": true,
      "next_start": 5
    }
  }
}

我基本上需要返回他们选择的值的标题和id。

目前我的jQuery代码如下：-

$('#search-deal').autocomplete({
    source: function (request, response) {
        $.getJSON("https://api.pipedrive.com/v1/searchResults/field?term=deal&field_type=dealField&field_key=title&start=0&api_token=<my_token>", function (data) {
            response($.map(data.title, function (value, key) {
                return {
                    label: value,
                    value: key
                };
            }));
        });
    },
    minLength: 2,
    delay: 100
});

【问题讨论】：

试试这样的：jsfiddle.net/DLLVw

标签： jquery json autocomplete

【解决方案1】：

您可以使用Array.map 将数据映射到标签、值和描述属性。

var datamap = data.data.map(function(i) {
  return {
    label: i.id + ' - ' + i.title,
    value: i.id + ' - ' + i.title,
    desc: i.title
  }
});

您在data.map 期间针对value 设置的属性用于设置输入的值。

然后使用Array.filter，您可以根据输入过滤这些值：

var key = request.term;

datamap = datamap.filter(function(i) {
  return i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0;
});

$('#search-deal').autocomplete({
  source: function(request, response) {
    var data = {
      "success": true,
      "data": [{
        "id": 1671,
        "title": "Queens Park Tyres deal"
      }, {
        "id": 1672,
        "title": "Wildman Craft Lager deal"
      }, {
        "id": 1673,
        "title": "General Store deal"
      }, {
        "id": 1674,
        "title": "Deluxe Off Licence deal"
      }, {
        "id": 1675,
        "title": "Ahmed Halal Bazaar deal"
      }],
      "additional_data": {
        "pagination": {
          "start": 0,
          "limit": 5,
          "more_items_in_collection": true,
          "next_start": 5
        }
      }
    };
    
    var datamap = data.data.map(function(i) {
      return {
        label: i.id + ' - ' + i.title,
        value: i.id + ' - ' + i.title,
        desc: i.title
      }
    });
    
    var key = request.term;
    
    datamap = datamap.filter(function(i) {
      return i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0;
    });

    response(datamap);
  },
  minLength: 1,
  delay: 100
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

<input type="text" id="search-deal" />

【讨论】：