自动完成JSON数据使用jQuery

Question

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

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

{ 
    "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 
    } 
    } 
} 

基本上，我需要回到他们选择的价值的标题和编号。

此刻我的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的数据映射到标签值&递减特性。

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