주식 종목 실시간 검색 및 자동완성 구현하기 jQuery Autocomplete 를 이용

구글 스프레드 시트로 주가 수익률 관리를 할 때 새 종목을 등록할 때 HTML 폼과 구글 앱스 스크립트로 최대한 자동화하여 사용하고 있습니다. 다음은 새 종목을 생성하는 화면입니다. 종목명을 검색 하면 종목이 검색 되고 종목코드, 시장등이 자동으로 채워집니다.  기타 정보를 입력 하고 저장하기를 누르면 새 종목이 생성됩니다.

구글 스프레드 시트에서는 엑셀 시트에 있는 데이터(서울경제 전 종목 시세)를 가져와서 구현했으나 주가정보를 JSON포맷의 데이터로 제공하고 있어 구글 시트 없이도 HTML 페이지에서 바로 구현 가능하도록 예제를 만들었습니다.
이 글은 jquery 를 이미 알고 있다고 가정하고 쓰는 글입니다.
jQuery Autocomplete 플러그인예제는 https://jqueryui.com/autocomplete/#default 에 있습니다. view source 를 클릭해 보시면 전체 코드가 있습니다. 사용법은 아주 간단한데요 1차원 배열(data)을 그대로 source 에 지정하면 됩니다.

 var data = [
      "LG전자",
      "LG전자우"
    ];
    $( "#stockName3" ).autocomplete({
      source: data
    });

주가를 다루는 첫 번째 예제는 jsonData 변수가 페이지에 있는 간단한 예제 입니다.
배열은 같은데 내부에 객체(Object) 형태로 되어 있습니다. value 와 label 은 필수 이며 없으면 동작하지 않습니다.

        // LG전자 주가정보 배열내에 객체형태 구성되어 있음 
        var data = [ 
            {"value":"066570","label":"LG전자","price":"92,900"},
            {"value":"066575","label":"LG전자우","price":"45,100"}
        ];

       $("#stockName2").autocomplete({
          source: data,  // 입력 데이터 
          select: function( event, ui ) {
            // 실제 데이터는 ui 변수에 item 객체를 통하여 전달  
            // value, label 은 필수 price 처럼 기타정보도 전달 가능 
            $(this).val(ui.item.label); // 종목명에 입력 
            $("#stockCode2").val(ui.item.value); // id 가 stockCode2 인 입력 폼에 전달 
            $("#stockPrice2").html(ui.item.price); // id가 stockPrice2에
            return false;
          },
          focus : function(event, ui) {  return false; }     
        });

select 는 검색어의 자동완성 결과 목록이 표시 되면서 나오는 항목을 선택 했을때 작동합니다.
LG전자우 를 선택하게 되면 종목코드에는 $("#stockCode2").val(ui.item.value) 에 의하여 들어가게 됩니다.
원래 입력데이터(jsonData)에는 value 는 종목코드로 지정했습니다. 데이터는 ui 변수에 item 객체를 통하여 전달됩니다.  

ui.item.value ,ui.item.label, ui.item.price 와 같이 입력되는 데이터에 기타 객체 정보도 전달 됩니다.
두번째 예제에서는 데이터가 원거리서버에 있는 경우로서 $.ajax 명령을 통하여 검색된 종목 정보를 JSON 포맷으로 받아서 처리하는 방식입니다. text 매개변수에 문자열(종목명,종목코드 등)을 넣으면 다음과 같은 JSON 포맷으로 데이터를 제공합니다.

서울경제에서 JSON 형태로 제공하는 것을 가져 왔습니다. https://www.sedaily.com/Stock/Quote/JsonSearchData

{ "Items": 
  [ {"Market":"1","IndustryCode":"013",
     "StockCode":"066570","StockName":"LG전자",
     "CurrentPrice":"92,900","PreGap":"400","PreRate":"+0.43",
     "Change":"2","Initial":"E","StockTime":"153004"
    },
    {"Market":"1","IndustryCode":"013",
     "StockCode":"066575","StockName":"LG전자우","CurrentPrice":"45,100","PreGap":"250",
     "PreRate":"-0.55","Change":"5","Initial":"E","StockTime":"153030"
     }
  ]
}

첫번째 예제와 다른 점은 source 에 변수가 지정 된 것이 아니고 함수 function(request, response){ } 가 지정되었습니다. 그리고 내부에는 원거리 데이터를 가지고 오기위한 $.ajax 함수가 지정되어 있죠. jquery $.ajax 함수 참조
$.ajax 에서 url에는 데이터를 제공하는 URL과 type 에는 get ( HTTP GET 방식) 그리고 가장 중요한 것은
data 인데 { 매개변수명 : 입력 폼의 값 } 이렇게 해줘야 됩니다. url 에 JsonSearchData?text=값 형태로 지정하면 동작하지 않더라고요. 이렇게 해주면 success 의 매개변수 인 data 에 서버로 부터 검색된 데이터가 들어가게 됩니다.
그런데 첫 번째 예제에서 source 로 들어가는 데이터의 객체에는 value 와 label 이 필수인데 데이터를 살펴보면 없습니다.

이 경우에는 적절하게 변형을 해줘야 합니다. 아래의 소스와 같이 JavaScript 에서 객체 및 배열을 다루는 map 메소드로 처리를 해주면 됩니다.  map()은 배열의 각 요소를 돌아가면서 처리하여 새로운 배열을 만드는 메소드입니다.

data["Items"] 하위가 배열이므로  $data["Items"].map(function.....  해서 처리하면 됩니다.
처리 후 나온 obj 변수를 response(obj) 를 이용하여 jQuery autocomplete 의 source 의 객체인자로 보내면 됩니다.

	$("#stockName").autocomplete({
          source: function( request, response ) {
          // 이전 요청 초기화
          if(searchRequest != null ) searchRequest.abort(); 
          
          // jquery의 $.ajax 명령
          searchRequest = $.ajax({
              url: "https://www.sedaily.com/Stock/Quote/JsonSearchData",  
              type: "get", 
              data: { text: $("#stockName").val() },
              success: function(data)
              {
                var obj = data["Items"].map(function(v){
                    return { 
                      label : v.StockName, 
                      value : v.StockCode, 
                      price : v.CurrentPrice,
                      market : (v.Market==1)?"코스피":"코스닥",
                      changes : (v.PreRate.indexOf('-')>0)? -v.PreGap:v.PreGap,
                      changepct : v.PreRate,
                      stockTime : v.StockTime,
                      IndustryCode : v.IndustryCode
                    }
                });
                // response 함수는 autocomplete 의 source 의 객체인자로 보내는 함수  
                response(obj);
              },
              dataType: "json",
            });
           
          },
          select: function( event, ui ) { 
            // 항목을 선택하면 HTML 페이지에 전달/표시 
            $(this).val(ui.item.label);
            $("#stockCode").val(ui.item.value);
            $("#stockPrice").html(ui.item.price);
            $("#market").html(ui.item.market);
            $("#changes").html(ui.item.changes);
            $("#changepct").html(ui.item.changepct);
            $("#stockTime").html(ui.item.stockTime);

            return false;
          },
          focus : function(event, ui) { 
              return false;
          },     
          autoFocus: true, 
          minLength: 2 // 최소 글자수
        });

그러면 다음과 같이 삼성을 검색 하면 목록에 표시가 됩니다. 마우스를 옮겨 선택하면 다음과 같이 폼에 채워 집니다.

팁으로 종목명 대신 종목코드를 입력해도 종목명에 목록이 나온답니다. 예를 들어 059로 입력하면
059가 포함되는 모든 종목명이 나열되는 것이지요.
예제 파일은 다음에 있습니다. http://richards.dothome.co.kr/jquery/stock1.html 소스 보기를 하면 전체 소스가 나옵니다.
구글스프레드 시트에서 구현한 것은 보려면 참고하면 됩니다.

구글스프레드시트 주식 수익률 관리 - 최종 수정 사항