jQuery liaison anticipée une fonction possible?

Question

Je vais avoir un petit problème avec un peu de jQuery:

function getQuickResults(terms) 
{ 
    var url = '/Search/PreviewSearch'; 

    $.ajax({ 
     type: "POST", 
     url: url, 
     data: { terms: terms }, 
     dataType: "json", 
     error: function(xhr, status, error) { 
      alert(error); 
     }, 
     success: function(json) { 

      $("#quickSearchResults").empty(); 

      for (var i = 0; i < json.length; i++) { 
       var title = json[i].Title; 

       $("#quickSearchResults").append($("<span class='quickSearchResult' />")) 
             .children(":last") 
             .append(json[i].Title) 
             .append("<br />"); 
      } 

      $("#quickSearchResults").children(":last").css({ 'border-bottom': 'none' }); 

      if (json.length > 0) { 
       $("#quickSearchResults").show(); 
      } 
      else { 
       $("#quickSearchResults").hide(); 
      } 
     } 
    }); 
} 

En gros, cela est ma fonction ajax pour un système d'indices d'entrée. À la touche, il envoie une requête ajax pour rechercher et renvoie une petite liste déroulante de valeurs.

Ce que je voudrais faire, c'est quand un utilisateur clique sur l'une des plages dans les résultats, il copie cette étendue à la zone de texte. J'ai donc essayé ceci:

 $("#quickSearchResults").append($("<span class='quickSearchResult' />")) 
           .children(":last") 
           .append(json[i].Title) 
           .append("<br />") 
           .click(function(evt) { 
            $("#searchBox").val(json[i].Title);  
           }); 

Mais cela ne fonctionne pas. J'ai essayé d'assigner une variable à json [i] .Title et d'utiliser cela à la place, mais il semble juste toujours retourner le titre du dernier résultat. Je pense que c'est probablement un problème contraignant, mais je ne sais pas s'il y a moyen de contourner le problème.

Answer 1

Pourquoi réinventer la roue? Jquery Autocomplete semble que ce serait adapter à votre objectif

Sinon il va certainement vous donner un aperçu de la façon de faire ce que vous essayez de faire

Answer 2

for (var i = 0; i < json.length; i++) { 
    (function(i){ 
    var title = json[i].Title; 

    $("#quickSearchResults").append($("<span class='quickSearchResult' />")) 
          .children(":last") 
          .append(json[i].Title) 
          .append("<br />"); 
    })(i); 
} 

Vous auriez besoin d'invoquer une fonction de sorte que le i est stocké et lié à une fonction au lieu de compter sur la dernière valeur, je pense quelque chose comme cela devrait fonctionner pour créer la fermeture. Faites-moi savoir si ce n'est pas le cas.

Answer 3

Je ne suis pas un gourou jQuery par tout moyen, mais Quelque chose comme ce travail?

function setSearchBox() 
{ 
    $("#searchBox").val($(this).data("title")) 
} 

puis dans votre réponse AJAX ...

$("#quickSearchResults").append($("<span class='quickSearchResult' />")) 
         .children(":last") 
         .append(json[i].Title) 
         .append("<br />") 
         .data("title",json[i].Title) 
         .click(setSearchBox);