J'ai construit la boîte d'entrée autocomplete (mais il y a un problème avec foucsout)

Question

J'ai construit la boîte d'entrée autocomplete (mais il y a un problème avec foucsout)

Voir ceci: http://www.youtube.com/watch?v=IxlXWfJsSeM

Demo: http://www.faressoft.org/autocomplete/

Mon code HTML:

Mon code jQuery:

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

résultat devrait être comme la zone de saisie tags de stackoverflow

---

Ajout de code réel de lien. --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

Ok j'ai ajouté la ligne $(".autoCompleteList").hide(); au gestionnaire d'événements clic et réécrit le code un peu:

$(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 
});