Créer un effet google suggérer avec asp.net mvc et jquery

Question

Ce que je veux réaliser, ce n'est pas l'effet de saisie semi-automatique. Ce que je veux réaliser, c'est que lorsque vous tapez sur google les résultats de recherche arrivent presque immédiatement sans cliquer sur un bouton de recherche.

J'ai déjà fait l'exemple ajax avec un bouton de recherche, mais je voudrais qu'il fonctionne pendant que vous tapez, il affiche les résultats dans un tableau.

Le problème est que je n'ai aucune idée par où commencer.

EDIT: Pour le demander d'une autre manière. Supposons que j'ai une grille avec 1000 noms. La grille est déjà présente sur la page. J'ai une zone de texte, que lorsque vous tapez doit filtrer cette grille en utilisant AJAX, aucun bouton de recherche nécessaire.

Merci

Answer 1

Utilisez un PartialView et un jQuery.ajax.

$(document).ready(function() { 
    $("#INPUTID").bind("keypress", function() { 
     if($(this).val().length > 2) { 
      $.ajax({ 
       url: "URL TO CONTROLLER ACTION", 
       type: "POST|GET", 
       data: {query: $("#INPUTID").val(), 
       success: function (data, responseStatus, jQXHR) 
       { 
        $("#WRAPPERDIVID").html(data); 
       } 
      }); 
     } 
    }); 
}); 

Alors à votre avis:

<div> 
    <input type="text" id="INPUTID" /> 
</div> 
<div id="WRAPPERDIVID"></div> 

Modifier

En outre, vous pouvez construire dans une sorte de solution de minuterie qui soumet la demande après soit 1 seconde de ne taper, donc vous ne recevez pas de demande à chaque événement de presse clé.

Answer 2

Theres un bon exemple, vous pouvez vérifier here essayer de taper « s » dans la recherche

si c'est ce que vous voulez alors le code et le tutoriel est here

une autre bonne exemple here

Answer 3

Si vous travaillez sur le "filtrage" d'un ensemble déjà situé sur la page, vous semblez vouloir définir la visibilité des éléments de la liste, en fonction des critères de recherche.

Si oui, alors d'abord, vous devez d'abord établir votre code HTML pour chaque élément. Vous pouvez utiliser les éléments suivants pour chaque élément:

<div class="grid"> 
    <div class="item"><input type="text" value="{name goes here}" readonly="readonly" /></div> 
    { 999 other rows } 
</div> 

Ensuite, vous devez utiliser un jquery pour définir chaque ligne visible/invisible sur la base des critères de recherche:

$("#searchBox").live("change", function() { 
    $("div[class='grid'] input").each(function() { 
     var search = $("#searchBox").val(); 
     if ($(this).val().toString().indexOf(search) != -1) 
      $(this).parent().show(); 
     else 
      $(this).parent().hide(); 
    }); 
}); 

Cela entraînera la visibilité de chaque élément à modifier, selon que le texte dans la zone de recherche correspond ou non au texte de l'élément.