저는 Internet Explorer를 거의 진짜 거의 잘 사용하지 않는데요. 


웹 서비스 개발하면서 항상 부담되는 것이 인터넷 익스플로러에서도 잘 보여야 해. 라는 것입니다. 


개발자가 아닌 이상 다들 가볍게 생각하는 것 같아요.

그냥 10분 투자하면 IE에서도 잘 보이게 할 수 있지 않냐?  라고 생각하는 것 같은데..  ㅠㅠㅠㅠ 


이야기가 딴 곳으로 새버렸네요. 






Awesomplete : http://leaverou.github.io/awesomplete/


예전 포스팅 : 2017/01/03 - [ # 자바스크립트,부트] - Autocomplete Library 추천






Awesomplete라는 라이브러리를 사용하고 있는데요. IE 환경에서 약간 조절해야 하는 부분이 있습니다. 


Awesomplete로 작동하는 input이 클릭되면 리스트가 아래로 쭉 펼쳐지도록 설정해서 사용하고 있는데요.


var awesomplete_vars = {

                autoFirst: true,

                minChars: 0,

                maxItems: 150

};


minChars를 0으로 설정하면 되는겁니다.


다른 곳에서는 별로 문제되지 않는데 IE(v11)에서는 선택하지 않아도 awesomplte를 생성하면서 리스트가 펼쳐지더라고요.




저는 focus / blur를 통해 리스트를 닫도록 설정했습니다. ㅜㅜㅜ


아래는 저에게만 발생하는 문제일 수도 있으니깐 PASS 하셔도 좋습니다.







암튼 이어서 문제는 여기서도 발생할 수 있는데요.


바로바로 Safari가 focus / blur를 하면 어쩌다가 focus를 다시 하더라고요.  (제 소스의 문제일 가능성이 큽니다만 !!)


암튼 그렇게 되면 다시 리스트가 펼쳐지는 문제가 발생하는데요.


이때는 IE만 focus / blur 하도록 하고 safari는 blur만 하면서 ul를 hide하는 방식을 사용했습니다. 




다른 로직 코드는 빼고 위 내용만 작성하면 아래와 같이.



document.getElementById('awesomplete_notebook').addEventListener("focus", function(e) {

        awesomplete_notebook.evaluate();

...

$('#awesomplete_notebook_div > ul').show();

});


document.getElementById('awesomplete_notebook').addEventListener("blur", function(e) {                

$('#awesomplete_notebook_div > ul').hide();

}, true);



if (isIE)

document.getElementById("awesomplete_notebook").focus();


document.getElementById("awesomplete_notebook").blur();






끝 :-)







+ Recent posts