Web/JS-Bootstrap

JS-autocomplete 사용시 발생한 버그

<ul id="ui-id-10" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="position: relative; top: -565px; left: 1507.53px; width: 385px; display: none;">
<li class="ui-menu-item">
    <div id="ui-id-14" tabindex="-1" class="ui-menu-item-wrapper">Unsigned</div>
</li>
<li class="ui-menu-item">
    <div id="ui-id-15" tabindex="-1" class="ui-menu-item-wrapper">Complete</div>
</li>
</ul>

autocomplete를 이용해 위와 같이 자동으로 리스트가 출력되는 코드를 만들어놓고,

나열되는 목록 중 하나를 클릭하면 해당 내용대로 datatable에 있는 데이터를 필터링하게끔 코드를 짜놨었다.

//autocomplete 클릭했을떄 자동으로 테이블 변경 
$(document).on('click','.ui-menu-item',function(){
  var idx= $(this).parent(".ui-menu").attr('id').slice(-1)-1
  console.log(idx)
  gtable.column(idx).search($(this).text()).draw();
});

이렇게 하면 ul의 id인 "ui-id-10" 안의 맨 끝 숫자를 받아와 자동으로 테이블의 column 인덱스를 찾고 , 해당 속성에서 필터링 동작을 수행하는데

이때 발생하는 문제가 10번째 속성부터는 코드가 제대로 동작하지를 않더라.

왜그런가 보니, 기존 코드대로면 slice 를 이용해 맨 끝 문자열을 받아오고, 숫자 -1이랑 빼는 연산을 진행하는데

10번째 속성부터는 2자리 숫자가 되기 때문에 맨 끝 문자열을 받아오면 숫자 0을 가져와 -1이랑 연산을 해버린다. 대체 무슨생각으로 저렇게 구현을 했는지 모를 노릇.

//autocomplete 클릭했을떄 자동으로 테이블 변경 
$(document).on('click','.ui-menu-item',function(){
  var idx= $(this).parent(".ui-menu").attr('id').split('-')[2]-1
  console.log(idx)
  gtable.column(idx).search($(this).text()).draw();
});

'-'기호를 기준으로 split 함수를 실행해 배열을 만들고 "ui-id-숫자" 형식에서 맨 끝 숫자 전체를 받아오게 다시 만들면 정상적으로 기능하여 테이블 필터링 기능이 실행된다.

문제는 코드만 찬찬히 따라가도 해결될 수 있는걸 다시금 깨닫게된..

저작자표시