내 자동 완성 응용 프로그램을 리팩터링하는 방법

Question

의도 한대로 작동하는 샘플 자동 완성 응용 프로그램을 작성했습니다.

HTML

<div class="wrapper"> 
    <div class="search"> 
     <input type="text" id="search" placeholder="Search" onkeyup="autoComplete(this.value)"> 
     <button onclick="search()">Go</button> 
     <ul id="suggest"> 

     </ul> 
    </div> 
    <div class="result"> 

    </div> 
</div> 

스크립트

var data = ['Bob', 'Aria', 'Smith', 'Jack', 'Cethy', 'Brad', 'Jony', 'Dan', 'Ashley', 'Janice']; 
    var suggestionArray = []; 
    var search = function(){ 
     var searchTerm = document.getElementById('search').value; 
     if(searchTerm == undefined || searchTerm == ""){ 
      return false; 
     } 
     console.log('You are searching for ' + searchTerm); 
    } 

    var clearSuggestion = function() { 
     suggestionArray = []; 
    } 

    var addListenersToChild = function(){ 
     var el = document.getElementById('suggest'); 
     el.addEventListener('click', function(event){ 
      var searchTerm = event.target.textContent; 
      document.getElementById('search').value = searchTerm; 
      clearSuggestion(); 
      showSuggestion(); 
     }, false) 
    } 

    var showSuggestion = function(){ 
     var el = document.getElementById('suggest'); 
     el.innerHTML = ""; 
     if(suggestionArray.length>0){ 
      suggestionArray.forEach(function(suggestTerm){ 
       var node = document.createElement('li'); 
       var textnode = document.createTextNode(suggestTerm); 
       node.appendChild(textnode); 
       el.appendChild(node); 
      }); 
      addListenersToChild(); 
     } 
    } 

    var formSuggestionArray = function(dataTerm){ 
     if(suggestionArray.indexOf(dataTerm) > -1){ 
      return false; 
     } else { 
      suggestionArray.push(dataTerm); 
     } 
    } 

    var matchVal = function(val){ 
     clearSuggestion(); 
     for(var i=0; i<data.length;i++){ 
      if(data[i].toLowerCase().indexOf(val.toLowerCase()) > -1) { 
       formSuggestionArray(data[i]); 
      } 
     } 
    } 

    var autoComplete = function(val){ 
     if(val == undefined || val == ""){ 
      clearSuggestion(); 
      showSuggestion(); 
      return false; 
     } 
     matchVal(val); 
     showSuggestion(); 
    } 

나는 확실하지 않다, 내가 코드를 작성한 방법은 그렇게 할 수있는 가장 좋은 방법은 경우. 그래서 예를 들면, 내가 알아야 할 것은 내 현재 프로그램이 최적화되어

가독성

• 좋은 경우
• 내가을 향상시킬 수있는 방법

를 모범 사례를 다음의 여부이다 코드

Answer 1

그러나 나에게 GREAT, ...

0123을 보이는