Menu a discesa con completamento automatico con pulsanti di collegamento o "AJAX impazzito"

Question

Ok, quindi voglio un menu a discesa con completamento automatico con pulsanti di collegamento come selezioni.Quindi, l'utente posiziona il cursore nella "casella di testo" e viene visualizzato un elenco di opzioni.Possono iniziare a digitare per restringere l'elenco oppure selezionare una delle opzioni nell'elenco.Non appena fanno clic (o premono Invio), il set di dati a cui è collegato verrà filtrato in base alla selezione.

Ok, è facile come avvolgere un completamento automatico AJAX attorno a un menu a discesa?NO?(Per favore?)

Answer 1

Questo widget può essere realizzato con tre elementi:un input di testo, un input di pulsanti e un elenco non ordinato per contenere i risultati.

 __________  _
|__________||v|__             <-- text and button
  |              |            <-- ul (styled to appear relative to text input)
  |              |
  |              |
  |______________|

ul mostrato su:

• Evento 'keyUp' dell'input di testo (se il valore non è vuoto)
• Evento 'click' dell'input del pulsante (se attualmente non visibile)

ul nascosto su:

• evento 'click' dell'input del pulsante (se attualmente visibile)
• evento 'clic' degli elementi dell'elenco

Quando viene visualizzato ul o viene attivato l'evento 'keyUp' dell'input di testo, è necessario effettuare una chiamata AJAX al server per aggiornare l'elenco.

In caso di successo i risultati dovrebbero essere inseriti in ul.Quando si creano gli elementi dell'elenco, dovrebbero avere un evento 'clic' allegato che imposta il valore di input del testo e nasconde ul (potrebbe essere necessario aggiungere un collegamento all'interno di li a cui allegare l'evento).

La parte più difficile è davvero il CSS.JavaScript è semplice soprattutto con una solida libreria come un prototipo che supporta più browser.

Probabilmente vorrai supportare alcuni ID per gli elementi, quindi puoi aggiungere alcuni input nascosti a ciascun elemento dell'elenco con l'ID e accanto all'input di testo per memorizzare l'ID degli elementi selezionati.

Answer 2

Dovrai gestire l'evento OnSelectedIndexChanged del tuo elenco a discesa per riassociare il tuo set di dati in base alla selezione degli utenti.Se vuoi che il filtraggio avvenga in un postback asincrono, avvolgi il set di dati (o il datagrid suppongo) e il tuo menu a discesa in un UpdatePanel.Questo è comunque un modo per farlo.

Answer 3

Non sono del tutto sicuro di cosa tu voglia, ma il Ra-Ajax Completatore automatico sicuramente ha il supporto per avere "controlli" al suo interno.Puoi vederlo nella casella di ricerca su Impilato infatti (angolo in alto a destra) dove stiamo utilizzando i collegamenti.Ma questo potrebbe anche essere LinkButtons se lo desideri...

Disclaimer;Lavoro con Ra-Ajax...

Answer 4

Secondo me, non dovresti assolutamente usare AJAX per questo.

Ecco perché:

(1) In primo piano:TUTTE le opzioni che può selezionare sono mostrate nel menu a discesa.Ciò significa che tutte le opzioni possibili sono già inviate al client.

(2) Se l'utente digita qualcosa, il numero di voci nel menu a discesa viene filtrato per corrispondere.Questo può essere fatto facilmente dal lato client.Essere ajax'y e tornare al server a questo punto rallenterà solo le cose.

phpguru.org ha un controllo che è "quasi esattamente" ciò di cui hai bisogno:

http://www.phpguru.org/static/AutoComplete.html#demo

È leggermente diverso da quello di cui hai bisogno in quanto mostra il menu a discesa quando fai doppio clic anziché sullo stato attivo.Dovrebbe essere abbastanza facile da modificare.

Spero che aiuti.