Instruction If/else combinée avec la boîte de recherche autocomplete utilisant Ajax

Question

J'essaye d'implémenter une boîte de recherche de saisie semi-automatique qui change son texte de saisie semi-automatique en fonction de la liste déroulante sélectionnée en Javascript. Cependant, je ne peux pas obtenir cette autocomplete à travailler lors de l'utilisation des instructions if/else. J'ai posté mon code ci-dessous:

<script type="text/javascript"> 
      $("#searchTypeDD").change(function DDChange() { 
       var searchType = $('#searchTypeDD').val(); 
       var searchData = null; 
       var searchMethodName = null; 
       var searchTerm = $('#searchTermEntered').val(); 

       if (searchType == 'movieSearch') { 
        data = { name: searchTerm }; 
        searchMethodName = "GetmovieTitle"; 
       } 
       else { 
        data = { director: searchTerm }; 
        searchMethodName = "Getdirector"; 
       } 

       $("#searchTermEntered").autocomplete({ 
        source: function (request, response) { 
         $.ajax({ 
          url: "AutoCompleteService.asmx/" + searchMethodName, 
          dataType: "jsonp", 
          data: searchData, 
          success: function (data) { 
           response(data); 
          } 
         }); 
        }, 
        minLength: 2, 
        select: function (event, ui) { 
         log("Selected: " + ui.item.value + " aka " + ui.item.id); 
        } 
       }); 
      }); 

Answer 1

Si le code ci-dessus est ce que vous utilisez, il y a une faute de frappe. Vous avez $:ajax au lieu de $.ajax (voir ci-dessous)

$(document).ready(function(){  
    $(".searchTermEntered").autocomplete({ 
     source: function(request, response) { 
      var searchType = $('.searchTypeDD').val(); 
      var searchData = null; 
      var searchMethodName = null; 
      var searchTerm = $('.searchTermEntered').val(); 

      if (searchType == 'movieSearch') { 
       searchData = { name: searchTerm }; 
       searchMethodName = "GetmovieTitle"; 
      } 
      else { 
       searchData = { director: searchTerm }; 
       searchMethodName = "Getdirector"; 
      } 

      $.ajax({ 
       url: "AutoCompleteService.asmx/" + searchMethodName, 
       dataType: "jsonp", 
       data: searchData, 
       success: function(data) { 
        response(data); 
       } 
      }); 
     }, 
     minLength: 2, 
     select: function(event, ui) { 
     log("Selected: " + ui.item.value + " aka " + ui.item.id); 
     } 
    }); 
}); 

MISE À JOUR: J'ai eu une faute de frappe dans mon code. Il a été mis à jour et devrait fonctionner pour vous. Le seul inconvénient est que vous utilisez. NET et lorsque .NET rend la page, l'ID de votre liste déroulante ne sera pas searchTypeDD. ASP.NET ajoute un tas de jargon à la fin de l'ID de contrôle pour s'assurer qu'il est unique et fournit une carte indiquant qui est son contrôle parent et ainsi de suite. Donc, je vous recommande de le faire pour votre contrôle déroulant:

et même pour votre entrée:

Ensuite, le code ci-dessus fonctionne comme nous sélectionnons le contrôle par la nom de la classe (sélecteur $ (. xxx)) au lieu du sélecteur ID ($ (# xxx)).