Come completare automaticamente in ASPX solo con la richiesta della pagina originale?

Question

Stiamo sviluppando una pagina ASPX (.NET 2.0) che include un elenco di selezione con troppi elementi al suo interno (oltre 200).

Abbiamo bisogno di una forma di completamento automatico per trasformarlo in qualcosa che si comporta come una casella di testo, ma con suggerimenti di completamento automatico.

Vorremmo usare JQuery. Finora la nostra ricerca ha prodotto solo completamenti automatici che richiedono una sorta di servizio di back-end, richieste aggiuntive (in AJAX) ecc. Preferiremmo consegnare tutti i dati in una volta con la richiesta di pagina. Idealmente sarebbe come selezionare le voci dell'elenco.

Esistono caselle con completamento automatico che convertono un elenco selezionato? o c'è un modo per collegare un completamento automatico ai dati già presenti nella pagina (in ASPX con .NET 2.0) in modo tale che non dovrà accedere a risorse esterne?

Modifica: Postbacks non era il fraseggio che stavo cercando. Voglio dire consegnato con la richiesta di pagina originale.

Modifica 2: la pagina dovrebbe degradarsi con grazia. Molte delle soluzioni disponibili "iniettano" il contenuto, quindi senza javascript non si ottiene alcun contenuto. Potrebbero essere oltre 200 le scelte, ma almeno esisterebbero lì. Ecco perché la conversione di un elenco selezionato è il nostro ideale.

Answer 1

Utilizza il plug-in di completamento automatico jQuery come suggerito da Steve Willcock. Output una casella di selezione normale, quindi sostituirla con uno script con una casella di testo e inizializzare il plug-in con un array creato se gli elementi opzione. Quindi i tuoi dati arrivano come select :

<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>

... e lo trasformi così:

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

... no JS? Nessun problema: hai ancora il tuo select .

Answer 2

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

Il plugin di completamento automatico di jquery può prendere i dati come un array. Se compili l'array in un file .js includi il file che dovrebbe soddisfare i tuoi requisiti.

Per un esempio, dai un'occhiata a la pagina demo - controlla " Città multiple (locali) " sezione e il file localdata.js che viene utilizzato lì.

Answer 3

Esistono numerosi controlli di terze parti (ne usiamo uno dal toolkit WebUI di ComponentArt) che ti darà la funzionalità combinata a completamento automatico.

Puoi anche ottenere la stessa idea usando le tecniche AJAX in modo da evitare un postback completo.

Answer 4

Le risposte qui sono state molto utili, ma abbiamo trovato questo plugin dopo ulteriori ricerche che funziona automaticamente direttamente nell'elenco di selezione:

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

Pagina di dimostrazione: http://phone.witamean.net/sexy- combo / examples / index.html

Ciò richiederà un po 'meno lavoro.

Volevo documentarlo per riferimento ad altri. Grazie a tutti per l'aiuto.