Frage

Wir entwickeln eine ASPX (.NET 2.0) Seite, die mit viel zu vielen Elementen darin (200 +).

eine Auswahlliste enthält

Wir brauchen eine gewisse Form von der automatischen Vervollständigung, damit dies in etwas, das wie ein Textfeld verhält, aber mit autocompelte Vorschläge.

Wir möchten JQuery verwenden. Bisher haben sich unsere Suche hat nur aufgedreht autocompletes, die irgendeine Art von Back-End-Dienst erfordern, zusätzliche Anforderungen (in AJAX) etc .. Wir würden es vorziehen, auf einmal alle Daten mit der Seitenanforderung zu liefern. Im Idealfall würde es als Auswahllisteneinträge sein.

Gibt es die automatische Vervollständigung Boxen, die eine Auswahlliste zu konvertieren? oder gibt es eine Möglichkeit, eine Autovervollständigung zu Daten, die bereits auf der Seite (in ASPX mit .NET 2.0) so verdrahten, dass es nicht auf externe Ressourcen zugreifen muß?

Edit: Postbacks war nicht die Phrasierung ich suchte. Ich meine mit der Originalseite Anfrage geliefert.

Edit 2: Die Seite sollte ordnungsgemäß beeinträchtigen. Viele der Lösungen gibt ‚injizieren‘ den Inhalt, also ohne Javascript Sie keine Inhalte. Es kann mehr als 200 Entscheidungen sein, aber zumindest würden sie dort vorhanden ist. Deshalb ist die Umwandlung einer Auswahlliste ist unser Ideal.

War es hilfreich?

Lösung

Mit dem jQuery Autocomplete-Plugin wie von Steve Willcock vorgeschlagen. Ausgabe eine regelmäßige Auswahl-Box, dann in Ihrem Skript ersetzen Sie es mit einem Textfeld und initialisieren das Plugin mit einem Array, das Sie bauen, wenn die Option-Elemente. So Ihre Daten kommen in als 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>

... und Sie verwandeln es in etwa so:

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

... kein JS? Kein Problem - haben Sie immer noch Ihre select

.

Andere Tipps

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

Das jquery autcomplete Plugin kann Daten als Array nehmen. Wenn Sie das Array in eine Js-Include-Datei erstellen, die Ihren Anforderungen entsprechen sollte.

Ein Beispiel einen Blick auf der Demo-Seite - überprüfen Sie die „Multiple Städte (local)“Abschnitt und die localdata.js-Datei, die dort verwendet wird.

Es gibt eine Reihe von Kontrollen von Drittanbietern (wir ein von ComponentArt der WebUI-Toolkit verwenden), dass Sie die automatische Vervollständigung Combobox Funktionalität geben.

Sie können auch die gleiche Idee mit AJAX-Techniken erreichen, so dass Sie einen vollständigen Postbacks vermeiden.

Die Antworten waren sehr hilfreich, aber wir fanden dieses Plugin nach weiterer Suche, die automatisch direkt auf der Auswahlliste funktioniert:

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

Demo Seite: http://phone.witamean.net/sexy- Combo / examples / index.html

Das wird ein bisschen weniger Arbeit erfordern.

Das wollte ich für die Referenz anderen dokumentieren. Vielen Dank für die Hilfe.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top