검색시 한글을 입력하고 스페이스를 한번 쳐야 드디어 검색 후보가 나타남

[lens0021]

• 상위 이슈: 문서 검색 개선 요청 femiwiki#65

(전략)
일반적인 검색엔진에서 구현은 내가 타이핑 하는 중간 중간 관련 autocomplete 가 수시로 바뀝니다. 페미위키에 구현된 방식은 먼저 키워드를 타이핑한 후 (예를 들어 "대한") 키보드에서 아래 키를 누르면, 추천 검색어가 나옵니다. 스페이스바를 눌러도 나오는군요.

약간의 버그성 동작이 있는데, 이렇게 아래키나 스페이스바로 추천검색어가 뜨기 시작하면 그때부터는 글을 더 치거나, 쓴것을 일부 지워도 추천검색어가 실시간으로 업데이트됩니다. 그런데 결정적으로 이렇게 뜨기 시작하기 전까지는, 뜨지가 않습니다. 예를 들어 검색창에서 "대한민국"이라고 타이핑하고 "국"상에 커서가 깜빡거리는 상태에서는 추천 검색어가 안 뜹니다. 그런데 거기서 아래나 스페이스바를 누르면 그때부터 활성화가 됩니다. 그래서 이 기능이 없는 것으로 오해하기 쉽겠네요.

동작 방식이 좀 애매하네요. 기술적 문제때문인지, 서버 퍼포먼스 때문인지..

--Yonghokim, https://femiwiki.com/index.php?title=%EC%A3%BC%EC%A0%9C:Uubdqs6uciq2evm8&topic_showPostId=uv3xa6r785lmqp05#flow-post-uv3xa6r785lmqp05

예를 들어 '이혜'라는 두 글자를 입력하면 아무것도 나오지 않다가, 스페이스바를 한 번 눌러야 드디어 이혜/이혜수/이혜훈이라는 검색 후보가 나타납니다. 스페이스바를 누르지 않아도 나타나게 할 수 있을까요?

--사샤나즈, https://femiwiki.com/w/%EC%A3%BC%EC%A0%9C:Uwitil18mnphiuyx

[lens0021]

일단 한국어 위키백과에서도 문제가 동일한 것을 확인할 수 있었습니다. 한글이 아닌 로마자일 때는 이러한 문제가 없습니다.

[Carlos-1216]

제이쿼리의 autocomplete를 이용하여 검색박스를 제작하면 한글에도 자동완성 박스가 바로바로 출현한 것을 확인할 수 있었습니다.

아래 링크에서 한글 value 를 추가하신 뒤 (ex. { value: '하나', data: '하나' } > 검색을 시도하시면 바로 자동완성 박스가 출현하는 것을 확인할 수 있습니다. 이 효과를 적용하면 어떨지 여쭙고 싶습니다.

exam code : https://jsfiddle.net/jmnote/ngcrxLnj/?utm_source=website&utm_medium=embed&utm_campaign=ngcrxLnj

js file link : https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.26/jquery.autocomplete.min.js

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; cursor: pointer; }
.autocomplete-selected { background: blue; color: white; }
.autocomplete-suggestions strong { font-weight: bold; color: orange; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
</style>

<input type="text" id="autocomplete">
<div id="outputbox">
  <p id="outputcontent">화폐를 선택하면 결과가 출력됨</p>
</div>

<script src="//code.jquery.com/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.26/jquery.autocomplete.min.js'></script>
<script>
  var currencies = [
    { value: 'United States dollar', data: 'USD' },
    { value: 'European euro', data: 'EUR' },
    { value: 'Japanese yen', data: 'JPY' },
    { value: 'Chinese renminbi', data: 'CNY' },
    { value: 'Hong Kong dollar', data: 'HKD' },
    { value: 'New Taiwan dollar', data: 'TWD' },
    { value: 'British pound', data: 'GBP' },
    { value: 'Omani rial', data: 'OMR' },
    { value: 'Canadian dollar', data: 'CAD' },
    { value: 'Swiss franc', data: 'CHF' },
    { value: 'Swedish krona', data: 'SEK' },
    { value: 'Australian dollar', data: 'AUD' },
    { value: 'New Zealand dollar', data: 'NZD' },
    { value: 'Czech koruna', data: 'CZK' },
    { value: 'Chilean peso', data: 'CLP' },
    { value: 'Turkish new lira', data: 'TRY' },
    { value: 'Mongolian tugrik', data: 'MNT' },   
    { value: 'Israeli new sheqel', data: 'ILS' },
    { value: 'Danish krone', data: 'DKK' },
    { value: 'Norwegian krone', data: 'NOK' },
    { value: '하나', data: '하나' },
    
  ];

  $('#autocomplete').autocomplete({
    lookup: currencies,
    onSelect: function (suggestion) {
      var content = '<strong>화폐명:</strong> ' + suggestion.value + ' <br> <strong>기호:</strong> ' + suggestion.data;
      $('#outputcontent').html(content);
    }
  });
</script>```



`

[lens0021]

코드를 찾아봤는데, 미디어위키에서 검색 추천을 표현하기 위해서 우선 jQuery.plugin.suggestions라는 jquery 플러그인을 작성하여 이것을 검색창에 붙여 사용하고 있는 것 같습니다. 해당 클래스에서는 jquery의 keypress 함수를 이용해 키 입력을 받는데, 이 함수가 한글은 안 받는지 뭐 그런지 해서 문제가 생긴 것 같습니다. 이 문제가 미디어위키 파브리케이터에는 이미 등록되어 있는 것을 찾았습니다. https://phabricator.wikimedia.org/T177251
(위의 각 링크는 1.32.0 기준 깃헙 링크입니다)

765P 님 말씀은, 혹시 페미위키가 자동완성을 직접 구현하고 있는 경우에 참고해 달라는 의견으로 이해했습니다. 아니면 자동완성을 직접 구현하여 대체하는 것을 전제에 두신 것인가요?

[lens0021]

다음과 같은 자바스크립트로 일단 처리하였습니다. https://femiwiki.com/index.php?oldid=140336

나중에 https://phabricator.wikimedia.org/T177251 이슈가 해결되면 해당 자바스크립트를 제거하는 것으로 마무리하면 되겠습니다.

[Carlos-1216]

넵 후자에 가깝습니다만 현재 추가하신 자스 코드(https://femiwiki.com/index.php?oldid=140336)로도 충분히 대처 가능한 것으로 보입니다. 감사합니다.

[lens0021]

new Vue.js search experience에서는 이 문제가 없어 보입니다