我已經建立了自動完成輸入框（但與foucsout問題）

Question

我已經建立了自動完成輸入框（但與foucsout問題）

關注此： http://www.youtube.com/watch?v=IxlXWfJsSeM

演示： http://www.faressoft.org/autocomplete/

我的HTML代碼：

我的jQuery代碼：

$(".autocomplete").focusout(function() { 
$(".autoCompleteList").css("display","none"); 
}); 

結果應該是像計算器

---

從鏈路增加實際代碼的標籤輸入框。 --patrick DW

$(document).ready(function(){ 
    $(".autocomplete").attr("value",""); 
    $(".autocomplete").keyup(function() { 
     $(".autoCompleteList").css("display","none"); 
     if ($(this).attr("value")!="") { 
      $(".autoCompleteList").width($(this).width()+3); 
      $(".autoCompleteList").css("display","block"); 
      var Value = $(this).attr("value"); 
      $.ajax({ 
      type: "GET", 
      url: "Tags.php", 
      data: "country=" + Value, 
      dataType: "html", 
      success: function(data) { 
       if (data!="") { 
        $(".autoCompleteList").html(data); 
        var re = new RegExp("(" + Value + ")", "gi"); 
        $('.autoCompleteList').html($('.autoCompleteList').html().replace(re, '<span>$1</span>')); 
        $(".autoCompleteList li").click(function() { 
         $(".autocomplete").attr("value", $(this).text()); 
        }); 
       } else { 
        $(".autoCompleteList").css("display","none"); 
       } 
      } 
      }); 
     } 
    }); 
    $(".autocomplete").focusout(function() { 
     //$(".autoCompleteList").css("display","none"); Watch the video. I can't choose the country. 
    });   
}); 

Answer 1

好，我加入$(".autoCompleteList").hide();線到點擊事件處理程序，並改寫了代碼一點點：

$(function(){ // shorthand for doc.ready  
    (function(){  
     var $input = $(".autocomplete"), // caching 
      $list = $(".autoCompleteList"); 
     $input.attr("value","").keyup(function() { 
      $list.hide(); 
      if ($(this).attr("value")!=="") { 
      $list.width($(this).width()+3).show();  
      var val = $(this).attr("value"); // dont use value as varaiable name 
      $.ajax({ 
      type: "GET", 
      url: "Tags.php", 
      data: "country=" + val, 
      dataType: "html", 
      success: function(data) { 
      if (data!=="") { 
       //replacing data 
       var re = new RegExp("(" + val + ")", "gi"); 
       data = data.replace(re, '<span>$1</span>'); 
       $list.html(data); 

       // binding click 
        $(".autoCompleteList li").bind('click', function() { 
        $(".autocomplete").attr("value", $(this).text()); 
        $(".autoCompleteList").hide(); 
        }); 

      } else { 
       $list.hide(); 
      } 
      } 
      }); 
     } 
    }); 
    })(); // self executing 
});