Comment effectuer la complétion automatique dans ASPX avec une demande de page d'origine uniquement?

Question

Nous développons une page ASPX (.NET 2.0) contenant une liste de sélection contenant beaucoup trop d'éléments (plus de 200).

Nous avons besoin d'une forme d'auto-complétion pour en faire quelque chose qui se comporte comme une zone de texte, mais avec des suggestions de compilation automatique.

Nous aimerions utiliser JQuery. Jusqu’à présent, notre recherche n’a donné que des compléments automatiques nécessitant une sorte de service d’arrière-plan, des requêtes supplémentaires (en AJAX), etc. Nous préférerions fournir toutes les données en une fois avec la demande de page. Idéalement, ce serait comme des entrées de liste de sélection.

Existe-t-il des boîtes de saisie semi-automatique permettant de convertir une liste de sélection? ou existe-t-il un moyen de relier une saisie semi-automatique aux données déjà présentes sur la page (sous ASPX avec .NET 2.0), de manière à ne pas devoir accéder à des ressources externes?

Edit: Les publications ne sont pas le phrasé que je cherchais. Je veux dire livré avec la demande de page originale.

Éditer 2: La page devrait se dégrader avec élégance. La plupart des solutions existantes «injectent» le contenu. Ainsi, sans JavaScript, vous n'obtenez aucun contenu. Il y a peut-être plus de 200 choix, mais au moins ils existeraient là-bas. C’est pourquoi la conversion d’une liste de sélection est notre idéal.

Answer 1

Utilisez le plug-in jQuery autocomplete proposé par Steve Willcock. Générez une boîte de sélection standard, puis dans votre script, remplacez-la par une zone de texte et initialisez le plug-in avec un tableau que vous construisez à l'aide des éléments d'option. Vos données sont donc envoyées sous la forme , sélectionnez :

<select size="1" id="options" name="options">
  <option>Option #1</option>
  <option>Option #2</option>
  <option>Option #3</option>
  <option>Option #4</option>
  <option>Option #5</option>
  <option>Option #6</option>
  <option>Option #7</option>
</select>

... et vous le transformez ainsi:

$(function(){
  // execute once the DOM is ready...

  // build array of option texts
  var options = [];
  $("#options option").each(function(){
    options.push($(this).text());
  });

  // build an input field, replace the select with it,
  // and wire up autocomplete.
  $("<input id='options' name='options' type='text'>")
    .replaceAll("#options")
    .autocomplete(options, {autoFill: true});  
});

... pas de JS? Pas de problème, vous avez toujours votre select .

Answer 2

http://docs.jquery.com/Plugins/Autocomplete/autocomplete/autocomplete#autl_or_dataoptions

Le plugin jquery autcomplete peut prendre les données sous forme de tableau. Si vous construisez le tableau dans un fichier d’inclusion .js adapté à vos besoins.

Pour un exemple, consultez la la page de démonstration - consultez la section " Plusieurs villes (local) " section, et le fichier localdata.js utilisé ici.

Answer 3

Il existe un certain nombre de contrôles tiers (nous en utilisons un de la boîte à outils WebUI de ComponentArt) qui vous donneront la fonctionnalité de liste déroulante à saisie automatique.

Vous pouvez également réaliser la même idée en utilisant des techniques AJAX afin d'éviter une publication complète.

Answer 4

Les réponses ici ont été très utiles, mais nous avons trouvé ce plugin après une recherche supplémentaire qui fonctionne automatiquement directement sur la liste de sélection:

Sexy Combo: http://code.google.com/p/sexy-combo /

Page de démonstration: http://phone.witamean.net/sexy- combo / examples / index.html

Cela nécessitera un peu moins de travail.

Je voulais documenter ceci pour la référence des autres. Merci à tous pour votre aide.