저번에 api만 받아와서 코인 리스트를 띄우는 페이지를 만들었다.
캠프시작 전, 복습을 위해 이것저것 하다보니, 이 페이지에서 방대한 코인을 일일이 찾아야 한다는 게 불편했고,
그래서 검색기능을 넣었다!
배우지 않은 거라 중복되는 것도 많고 너저분해 보이지만, 이렇게 배우는거지 뭐.
첫 페이지다. 저 버튼을 누르면 숨겨놨던 코인리스트를 보여준다.
원래는 View Coin Trends 버튼은 없었고 사진 속 상자만 덩그러니 있었는데,
업데이트 버튼을 누르기 전까지 빈 상태로 있어서 보기 안 좋았다.
그래서 버튼을 만들어서 숨겼고, 외부에서 데이터를 받아오는 동안 로딩 표시를 해줬다.
보통 1초 내외로 코인 목록이 뜨지만 가끔 좀 더 걸릴 때도 있어서 넣었다.
로딩이 끝나면 코인리스트가 나온다.
function q1() {
$(`#post`).show();
$(`#showBtn`).hide();
$(`#names-q1`).empty();
$.ajax({
type: "GET",
url: "https://api.coinpaprika.com/v1/tickers?quotes=KRW",
data: {},
success: function (response) {
let midtitlehtml = `<tr>
<td>Coin Name</td>
<td>Coin Symbol</td>
<td>Coin Price (KRW)</td>
</tr>`
$(`#names-q1`).append(midtitlehtml);
for (let i = 0; i < response.length; i++) {
let name = response[i]['name'];
let symbol = response[i]['symbol'];
let price = response[i]['quotes']['KRW']['price'].toFixed(3)
let html = `<tr>
<td>${name}</td>
<td>${symbol}</td>
<td>${price}</td>
</tr>`
$(`#names-q1`).append(html);
}
},
beforeSend: function () { // 데이터 불러올 때 실행
$(`#loading`).show(); // 로딩 보여주기
},
complete: function () { // 데이터 불러오기 완료시 실행
$(`#loading`).hide(); // 로딩 숨기기
}
})
}beforeSend, complete를 사용해서 로딩 이미지를 보여주고 숨겨줬다.
미드타이틀 부분은 어차피 고정되어 있는 부분이라 함수 안에 넣지 않고 항상 보이게 하고 싶었지만,
그렇게 하면 로딩중에 보이기 때문에 보기 싫어서 함수 안에 넣어버렸다.
코인 수가 2500개 정도 되는데, 그 중에서 원하는 코인 정보를 눈으로 보면서 찾는다는 건 답이 없다.
그래서 검색기능을 넣었다.
for (let i = 0; i < response.length; i++) {
let findcoin = $(`#searchInput`).val().toLowerCase()
let name = response[i]['name'];
let str = name.toLowerCase();
let symbol = response[i]['symbol'];
let price = response[i]['quotes']['KRW']['price'].toFixed(3)
let html = `<tr>
<td class="line">${name}</td>
<td class="line">${symbol}</td>
<td class="line2">${price}</td>
</tr>`
if (str === findcoin) {
$(`#names-q1`).append(html);
}
}입력값은 소문자, 코인이름은 대문자면 조건문에 맞지 않을테니, 소문자로 통일해줬다.
findcoin 변수에 사용자가 입력하는 값을 toLowerCase()를 사용해서 소문자로 치환했다. (toUpperCase는 대문자로 치환해준다.)
name은 ajax로 받은 response의 name(코인이름)이며 str은 그 name을 소문자로 치환한 변수다.
그리고 하단 부분의 if문은, for문이 돌아가는 동안 str과 findcoin이 일치하게 되는 부분이 있다면 html 변수의 값을 append한다.
CoinName은 앞 글자가 대문자인 Bitcoin이지만 소문자로 치환돼서 검색됐기 때문에 잘 작동한다.
근데, 가끔 코인이름이 생각나지 않거나, 한 두 글자만 생각나는 경우가 있을 수도 있기 때문에
일부분만 타이핑해도 자동으로 완성시켜주는 기능도 넣었다.
$(function () { //화면 다 뜨면 시작
findlist();
var searchSource = list; // 배열 형태로
$("#searchInput").autocomplete({ //오토 컴플릿트 시작
source: searchSource, // source 는 자동 완성 대상
minLength: 1,// 최소 글자수
autoFocus: true, //첫번째 항목 자동 포커스 기본값 false
delay: 100, //검색창에 글자 써지고 나서 autocomplete 창 뜰 때 까지 딜레이 시간(ms)
// disabled: true, //자동완성 기능 끄기
position: {my: "right top", at: "right bottom"}, // 자동완성창이 뜨는 위치
}
});
});autocomplete라는 기능을 사용했는데, 원래 이건 본인이 임의로 만들어 놓은 배열에 대한 자동완성 기능이다.
이거 말고도 ajax 데이터로 자동완성 기능을 하는 autocomplete 코드도 있었는데,
이해도 안가고 예제랑 내가 만든 코드랑 다른 부분이 많아서 그냥 1차원적으로 ajax 데이터를 배열로 만들어 버렸다. 아래 코드처럼.
let list = [];
function findlist() {
$.ajax({
type: "GET",
url: "https://api.coinpaprika.com/v1/tickers?quotes=KRW",
data: {},
success: function (response) {
for (let i = 0; i < response.length; i++) {
let name = response[i]['name'];
let str = name.toLowerCase();
list.push(str);
}
}
})
}데이터를 받아와서 필요한 부분인 name부분만 for문으로 돌려서, push로 함수 밖의 list변수 배열에 다 넣어줬다.
아래 처럼 잘 작동한다.
검색창에 타이핑한 문자가 포함된 모든 코인 이름을 보여준다. (bt를 타이핑하면 bt가 들어간 모든 코인을 보여준다.)
거의 다 만들어가니 이런 생각이 들었다.
'하나의 데이터로 리스트를 만들고 검색, 자동완성 기능을 만드는데 두 번, 세 번 불러올 필요가 있을까?' 하는 생각.
더 공부하면서 하나하나 바꿔봐야겠다. css도 포함!
