[자동완성-미완성]input 아래 리스트 생성

/* 3개 이상 될 때 체크 후 데이터 받아와서 자동완성 리스트 만들기 (출발지) */
$("#Input_Start").keyup(function () {

    $("#searchclear_Start").toggle(Boolean($(this).val()));

    var vValue = $("#Input_Start").val();

    if (vValue.length > 2) {
        //Ajax 통신
        if (vValue != _vAutoValue) {
            _vHeight_Start = 0;
            _vSelectATag_Strat = 0;
            //_vAutoValue = "";

            fnGetJson_Port('Search_StartData', vValue);
        }
    } else {
        $("#Search_StartData").empty();
    }

    /* 값이 있을 경우 show 없을 경우 hide */
    if (0 < vValue.length) {
        $("#Search_StartData").show();
    } else {
        $("#Search_StartData").hide();
    }


    _vAutoValue = vValue;

});

//////////////////////////////////////자동완성 리스트 클릭 시 이벤트

//자동 완성 리스트 클릭 시 해당 데이터 input 박스에 넣기 (출발지)
$(document).on('click', "#Search_StartData a", function (event) {
    //현재 선택된 A태그 가져오기
    //var vGetValue = event.target.attributes.value.nodeValue; //value값 가져오기
    var vGetValue = event.target.text;   //Text

    $("#Input_Start").val(vGetValue)
    fnShowHideList("Input_Start", "Search_StartData", "none");
    $("#Search_StartData").hide();

});

//영역 포커스 잃었을 때/////////////////////////////////////////////////////////

var IsCheckMouse;

$("#Search_StartData").on('mouseenter', function () {
    IsCheckMouse = true;
});
$("#Search_StartData").on('mouseleave', function () {
    IsCheckMouse = false;
});


//focus 잃었을 경우.
$("#Input_Start").focusout(function (e) {

    //input 박스 데이터 없을 시 삭제 + 초기화
    if (IsCheckMouse == false) {
        $("#Input_Start").val("");
        $("#Search_StartData").empty();
    }
});


///////////////////////////방향키 위 아래 이벤트 

 //자동완성 키 ↑↓ 이벤트
$("#Input_Start").keydown(function (e) {
    //방향키 ↑
    if (e.keyCode == '38') {
        if (_vSelectATag_Strat == 0) {
            //리스트의 첫번째를 선택 했을 경우            
            _vSelectATag_Strat = 0;
            $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").addClass("A_Select");
        } else {
            $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").removeClass();
            _vSelectATag_Strat--;
            $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").addClass("A_Select");

            /* 리스트 selected 설정 */
            var winH = $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").outerHeight();
            _vHeight_Start -= winH;

            //Focus 이동
            if (235 > _vHeight_Start) {
                $('#Search_StartData').animate({ scrollTop: _vHeight_Start }, 0);
            }
        }
        //기본 이벤트 막기 (방향키 ↑ 눌렀을 때 커서 이동 막기)
        e.preventDefault();
    }
    //방향키 ↓
    else if (e.keyCode == '40') {

        if (_vSelectATag_Strat == $("#Search_StartData a").length - 1) {
            //리스트의 마지막을 선택 하는 경우
            _vSelectATag_Strat == $("#Search_StartData a").length - 1;
            $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").addClass("A_Select");
        } else {
            $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").removeClass();
            _vSelectATag_Strat++;
            $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").addClass("A_Select");

            /* 리스트 selected 설정 */
            var winH = $("#Search_StartData a:eq(" + _vSelectATag_Strat + ")").outerHeight();
            _vHeight_Start += winH;
            var vDivH = $("#Search_StartData").outerHeight();
            console.log(vDivH);

            $('#Search_StartData').animate({ scrollTop: _vHeight_Start - vDivH }, 0);
        }
    }
    //Enter Key
    else if (e.keyCode == '13') {
        var vSelectValue = $(".A_Select").text();

        $("#Input_Start").val(vSelectValue);

        $("#Search_StartData").empty();
    }
    //키보드 값 확인.
    console.log(_vSelectATag_Strat);
});

////////////////////Search 리스트 체크 로직
/* Search 리스트 체크하는 로직 */

function fnfilterFunction(input,div) {
var input, filter, ul, li, a, i;
input = document.getElementById(input);
filter = input.value.toUpperCase();
div = document.getElementById(div);
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "block";
} else {
a[i].style.display = "none";
}
}
if(filter == ""){
for(i = 0; i < a.length; i++){
a[i].style.display ="none";
}
}
}

/* 자동완성 hide 시켜주는 함수 */
function fnShowHideList (input,div,ShowType){
var vInput , vFilter , vAtag , vShowType;
vInput = $("#"+input).val();
vFilter = vInput.toUpperCase();

vAtag = $("#"+div+" a");    

for(var i=0; i<vAtag.length; i++){
    vAtag[i].style.display = ShowType;
}

}

//▼버튼 클릭 시 리스트 show / hide
/*function fnControlList(id){
vInput = $("#"+id).css("display");
vCheck = ""

if(vInput == "block"){
$("#"+id).hide();
vCheck = "none";
}else{
$("#"+id).show();
vCheck = "block";
}

if(id == "Search_StartData"){
fnShowHideList("Input_Start","Search_StartData",vCheck);
}else if(id == "Search_EndData"){
fnShowHideList("Input_End","Search_EndData",vCheck);
}
}*/