私のオートコンプリートアプリケーションをリファクタリングする方法

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ルックス