オートコンプリート選択を選択した場合にのみ表示する方法は？

Question

私はオートコンプリート予測を行うJavaScriptコードを持っています。

このコードでは、マウスをその予測の上に置いても単語が表示されます。

実際には、リストから述語を選択した場合にのみ表示する必要があります。

デモここを参照してください：JSFIDDLE

$(function() { 
    var availableTags = [ 
     "ActionScript", 
     "AppleScript", 
     "Asp", 
     "BASIC", 
     "C", 
     "C++", 
     "Clojure", 
     "COBOL", 
     "ColdFusion", 
     "Erlang", 
     "Fortran", 
     "Groovy", 
     "Haskell", 
     "Java", 
     "JavaScript", 
     "Lisp", 
     "Perl", 
     "PHP", 
     "Python", 
     "Ruby", 
     "Scala", 
     "Scheme" 
    ]; 
    $("#tags").autocomplete({ 
     source: availableTags 
    }); 
}); 
$(window).load(function(){ 
    $('#tags').each(function(i, el) { 
     var that = $(el); 
     that.autocomplete({ 
      select: function(event , ui) { 
       alert("You searched for: " + ui.item.label);//alerting the selection to the user 
      } 
     }); 
    }); 
}); 

これらのラインの意味は何ですか？誰かが私を説明することができますか？

$(window).load(function(){ 
    $('#tags').each(function(i, el) { 
     var that = $(el); 
     that.autocomplete({ 
      select: function(event , ui) { 
       alert("You searched for: " + ui.item.label);//alerting the selection to the user 
      } 
     }); 
    }); 
}); 

Answer 1

私はあなたが本当にそれをより困難にしているかもしれないと思います。

$("#tags").autocomplete({ 
    source: availableTags, 
    focus : function(event) { event.preventDefault(); }, 
    select: function(event, ui) { 
     alert("You searched for: " + ui.item.label); //alerting the selection to the user 
    } 
}); 

で十分です。 focusイベントでデフォルトイベントがトリガーされないようにすると、マウスがホバリングしている要素が#tags入力に表示されないようになります。