jQuery를 사용하여 JSON 데이터로 자동 완성

Pipedrive API를 사용하여 데이터를 검색 할 자동 완성 입력란을 추가하려고합니다.jQuery를 사용하여 JSON 데이터로 자동 완성

내가 Pipedrive에서 얻는 JSON 응답은 다음과 같다 : - 나는 기본적으로 그들이 선택한 값의 제목과 ID를 반환해야

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

출처

2017-09-15 nsilva

이런 식으로 뭔가를 시도 : 그런 다음이 Array.filter은 입력에 따라 그 값을 필터링 할 수 있습니다 사용

http://jsfiddle.net/DLLVw/ –

당신은, 값 & 내림차순 속성에 라벨을 지정하기 위해 데이터를 매핑 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에 대해 설정 한 속성은 입력 값을 설정하는 데 사용됩니다.

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

출처

2017-09-15 09:05:43 Nisarg

jQuery를 사용하여 JSON 데이터로 자동 완성

답변

관련 문제