Question

我正在尝试添加自动填充输入文本框，该文本框将使用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
});

Answer 1

您可以使用Array.map将数据映射到标签，值和＆amp; desc属性。

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

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

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

var key = request.term;

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

＆＃13;

$('#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
});

＆＃13;

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

＆＃13;

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

1 个答案: