Autocomplete Email hosts

by ChangJoo Park

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div>
  Email：
  <input id="email" type="text" />
</div>

CSS

body {
  font-family: sans-serif;
}

JavaScript

$(function() {
  var hosts = [
    "gmail.com", "naver.com", "nate.com", "hanmail.net"
  ];

  $("#email").autocomplete({
    autoFocus: true,
    minLength: 5, // 5글자부터 작동
    source: function setAutocompleteSource(request, response) {
      var term = request.term
      var atIndex = term.indexOf("@")
      var name = term
      var host = ""
      var result = []
      // 현재 입력한 문자열 추가
      result.push(term)

      if (atIndex > -1) {
        name = term.slice(0, atIndex)
        host = term.slice(atIndex + 1)
      }

      if (name) {
        var findedHosts = hosts.filter(function(item) {
          return item.indexOf(host) > -1;
        })
        var findedResults = findedHosts.map(function(host) {
          return name + "@" + host;
        });
        result = result.concat(findedResults)
        // 중복 제거: 사용자가 입력한 문자열과 자동완성된 문자열이 동일한 경우 제거
        // 예: [email protected] 을 끝까지 입력한 상태에서 
        // 자동완성 문자열에 [email protected]이 두개 나올 수 있음
        result = result.filter(function(element, position) {
          return result.indexOf(element) === position
        })
      }
      response(result);
    }
  });
});