Einführung in jQuery-Autocomplete-Beispiele

Dieser Artikel stellt hauptsächlich eine Einführung in jQuery UI Autocomplete vor. Es ist die leistungsstärkste und flexibelste Autocomplete-Komponente, die ich je verwendet habe. Sie unterstützt lokale Array/JSON-Arrays und Array-Anfragen. /JSON-Array, JSONP und Funktion (am flexibelsten) zum Abrufen von Daten.

jQuery UI Autocomplete ist die Autovervollständigungskomponente von jQuery UI. Es ist die leistungsstärkste und flexibelste Autovervollständigung, die ich je verwendet habe. Sie unterstützt lokale Array/JSON-Arrays, die über Ajax und JSONP angefordert werden Funktion (die flexibelste) zum Abrufen von Daten.

Unterstützte Datenquellen

jQuery UI Autocomplete unterstützt hauptsächlich zwei Datenformate: String Array und JSON.

Es gibt nichts Besonderes am gewöhnlichen Array-Format, wie folgt:

["bjpowernode","动力节点","李四"]

Für Arrays im JSON-Format sind folgende Attribute erforderlich: Beschriftung und Wert , wie folgt:

[{label: "动力节点", value: "bjpowernode"}, {label: "李四", value: "李四"}]

Das Beschriftungsattribut wird zur Anzeige im Popup-Menü für die automatische Vervollständigung verwendet, und das Wertattribut ist der Wert, der dem Textfeld nach der Auswahl zugewiesen wird.

Wenn eines der Attribute nicht angegeben ist, wird es wie folgt durch das andere Attribut ersetzt (d. h. Wert und Beschriftung haben denselben Wert):

[{label: "bjpowernode"}, {label: "李四"}]
[{value: "bjpowernode"}, {value: "李四"}]

Wenn weder Bezeichnung noch Wert angegeben sind. Wenn angegeben, kann es nicht für Autovervollständigungsaufforderungen verwendet werden.

Beachten Sie außerdem, dass der Schlüssel der JSON-Ausgabe vom Server wie folgt in doppelte Anführungszeichen gesetzt werden muss:

[{"label": "动力节点", "value": "bjpowernode"}, {"label": "李四", "value": "李四"}]

Andernfalls kann ein Parserfehler auftreten.

Hauptparameter

Die häufig verwendeten Parameter der automatischen Vervollständigung der jQuery-Benutzeroberfläche sind:

1.Quelle: wird zur Angabe der Datenquelle verwendet. der Typ ist String, Array, Funktion

1. String: Serverseitige Adresse für Ajax-Anfrage, gibt Array/JSON-Format zurück

2. Array: String Array oder JSON-Array

3. Funktion (Anfrage, Antwort): Holen Sie sich den Eingabewert über request.term, Antwort ([Array]), um die Daten darzustellen (JSONP ist so)

2.minLength: Wenn die Länge der Zeichenfolge im Eingabefeld minLength erreicht, aktivieren Sie die automatische Vervollständigung

3.autoFocus: Wenn das Auswahlmenü für die automatische Vervollständigung angezeigt wird , wählen Sie es automatisch aus. Die erste

4.Verzögerung: wie viele Millisekunden die Aktivierung der automatischen Vervollständigung verzögert werden soll

Andere, weniger häufig verwendete sind nicht aufgeführt.

Verwendung

Angenommen, es gibt das folgende Eingabefeld auf der Seite:

<input type="text" id="autocomp" />

AJAX-Anfrage
Durch Angabe der Quelle als Server Es wird durch die Adresse des Clients wie folgt implementiert:

$("#autocomp").autocomplete({
  source: "remote.ashx",
  minLength: 2
});

und empfängt sie dann auf der Serverseite und gibt die entsprechenden Ergebnisse aus. Beachten Sie, dass der standardmäßig übergebene Parametername lautet Begriff:

public void ProcessRequest(HttpContext context) {   
// 查询的参数名称默认为term   
string query = context.Request.QueryString["term"];   
context.Response.ContentType = "text/javascript";   
//输出字符串数组 或者 JSON 数组   
context.Response.Write("[{\"label\":\"动力节点\",\"value\":\"bjpowernode\"},{\"label\":\"李四\",\"value\":\"李四\"}]"); }

Lokales Array/JSON-Array

// 本地字符串数组
var availableTags = [
  "C#",
  "C++",
  "Java",
  "JavaScript",
  "ASP",
  "ASP.NET",
  "JSP",
  "PHP",
  "Python",
  "Ruby"
];
$("#local1").autocomplete({
  source: availableTags
});
// 本地json数组
var availableTagsJSON = [
  { label: "C# Language", value: "C#" },
  { label: "C++ Language", value: "C++" },
  { label: "Java Language", value: "Java" },
  { label: "JavaScript Language", value: "JavaScript" },
  { label: "ASP.NET", value: "ASP.NET" },
  { label: "JSP", value: "JSP" },
  { label: "PHP", value: "PHP" },
  { label: "Python", value: "Python" },
  { label: "Ruby", value: "Ruby" }
];
$("#local2").autocomplete({
  source: availableTagsJSON
});

Callback-Funktionsmethode

Erhalten Sie benutzerdefinierte Daten durch Angabe der Quelle als eine benutzerdefinierte Funktion. Es gibt zwei Hauptfunktionen: Parameter (Anfrage, Antwort), die zum Abrufen von Eingabewerten bzw. zum Präsentieren von Ergebnissen verwendet werden

Daten im lokalen Array-Modus abrufen (Imitierung der Sina Weibo-Anmeldung)

var hosts = ["gmail.com", "live.com", "hotmail.com", "yahoo.com", "bjpowernode.com", "火星.com", "李四.com"];
$("#email1").autocomplete({
  autoFocus: true,
  source: function(request, response) {
    var term = request.term, //request.term为输入的字符串
      ix = term.indexOf("@"),
      name = term, // 用户名
      host = "", // 域名
      result = []; // 结果
 
    result.push(term);
    // result.push({ label: term, value: term }); // json格式
    if (ix > -1) {
      name = term.slice(0, ix);
      host = term.slice(ix + 1);
    }
    if (name) {
      var findedHosts = (host ? $.grep(hosts, function(value) {
        return value.indexOf(host) > -1;
      }) : hosts),
      findedResults = $.map(findedHosts, function(value) {
        return name + "@" + value; //返回字符串格式
        // return { label: name + " @ " + value, value: name + "@" + value }; // json格式
      });
      result = result.concat($.makeArray(findedResults));
    }
    response(result);//呈现结果
  }
});

Daten über JSONP abrufen

Rufen Sie sie direkt von der offiziellen DEMO ab, senden Sie eine Ajax-Anfrage an den Remote-Server, verarbeiten Sie dann das Rückgabeergebnis und präsentieren Sie es schließlich durch Antwort:

$("#jsonp").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "http://ws.geonames.org/searchJSON",
      dataType: "jsonp",
      data: {
        featureClass: "P",
        style: "full",
        maxRows: 12,
        name_startsWith: request.term
      },
      success: function(data) {
        response($.map(data.geonames, function(item) {
          return {
            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
            value: item.name
          }
        }));
      }
    });
  },
  minLength: 2
});

Hauptereignisse

jQuery UI Autocomplete verfügt über einige Ereignisse, die in einigen Phasen zur zusätzlichen Steuerung verwendet werden können:

1.create(event, ui): Wenn Autocomplete erstellt wird, können Sie das Erscheinungsbild in diesem Ereignis steuern

2.search(event, ui): Bevor Sie die Anfrage starten, Sie können in diesem Fall false zurückgeben, um die Anfrage abzubrechen

3.open(event, ui): Wenn die Autocomplete-Ergebnisliste angezeigt wird

4.focus(event , ui): Jedes Element in der Autocomplete-Ergebnisliste wird abgerufen. Wenn der Fokus aktiviert ist, ist ui.item das fokussierte Element

5.select(event, ui): Wenn ein beliebiges Element in der Autocomplete Ergebnisliste ist ausgewählt, ui.item ist das ausgewählte Element

6.close(event, ui): Wenn die Autocomplete-Ergebnisliste geschlossen ist

7.change( event, ui): Wenn sich der Wert ändert, ist ui.item das ausgewählte Element

Die Elementattribute (falls vorhanden) der UI-Parameter dieser Ereignisse verfügen standardmäßig über Beschriftungs- und Wertattribute, unabhängig davon ob der Datensatz in der Quelle ein Array oder ein JSON-Array ist, wie folgt:

["bjpowernode","动力节点","李四"]
[{label: "动力节点", value: "bjpowernode"}, {label: "李四", value: "李四"}]
[{label: "动力节点", value: "bjpowernode", id: "1"}, {label: "李四", value: "李四", id: "2"}]

Wenn es sich um den dritten Typ handelt, können Sie auch den Wert von ui.item.id abrufen.

Diese Ereignisse können auf zwei Arten gebunden werden, wie folgt:

// 在参数中
$("#autocomp").autocomplete({
  source: availableTags
  , select: function(e, ui) {
   alert(ui.item.value) 
  }
});
 
// 通过bind来绑定
$("#autocomp").bind("autocompleteselect", function(e, ui) {
  alert(ui.item.value);
});

Der zum Binden durch Binden verwendete Ereignisname ist „autocomplete“ + Ereignisname, z als „select“ ist „autocompleteselect“.

Autovervollständigung für mehrere Werte

Unter normalen Umständen erfordert die automatische Vervollständigung des Eingabefelds nur einen Wert (z. B. Javascript); bei mehreren Werten werden benötigt (z. B. Javascript, C#, Asp.net), müssen Sie einige Ereignisse für die zusätzliche Verarbeitung binden:

1 Geben Sie „false“ im Fokusereignis zurück, um den Wert des Eingabefelds zu verhindern durch einen einzelnen Wert der automatischen Vervollständigung ersetzt werden

2 Kombinieren Sie mehrere Werte im Select-Ereignis

3 Führen Sie eine Verarbeitung im Keydown-Ereignis des Elements durch , der Grund ist der gleiche wie 1

4. Verwenden Sie die Callback-Funktionsquelle, um den letzten Eingabewert abzurufen und das Ergebnis darzustellen

Oder nehmen Sie einfach den offiziellen DEMO-Code direkt :

// 按逗号分隔多个值
function split(val) {
  return val.split(/,\s*/);
}
// 提取输入的最后一个值
function extractLast(term) {
  return split(term).pop();
}
// 按Tab键时，取消为输入框设置value
function keyDown(event) {
  if (event.keyCode === $.ui.keyCode.TAB &&
      $(this).data("autocomplete").menu.active) {
    event.preventDefault();
  }
}
var options = {
  // 获得焦点
  focus: function() {
    // prevent value inserted on focus
    return false;
  },
  // 从autocomplete弹出菜单选择一个值时，加到输入框最后，并以逗号分隔
  select: function(event, ui) {
    var terms = split(this.value);
    // remove the current input
    terms.pop();
    // add the selected item
    terms.push(ui.item.value);
    // add placeholder to get the comma-and-space at the end
    terms.push("");
    this.value = terms.join(", ");
    return false;
  }
};
// 多个值，本地数组
$("#local3").bind("keydown", keyDown)
  .autocomplete($.extend(options, {
    minLength: 2,
    source: function(request, response) {
      // delegate back to autocomplete, but extract the last term
      response($.ui.autocomplete.filter(
        availableTags, extractLast(request.term)));
    }
  }));
// 多个值，ajax返回json
$("#ajax3").bind("keydown", keyDown)
  .autocomplete($.extend(options, {
    minLength: 2,
    source: function(request, response) {
      $.getJSON("remoteJSON.ashx", {
        term: extractLast(request.term)
      }, response);
    }
  }));

Verwandte Empfehlung:

So verwenden Sie die automatische Vervollständigung in Ionic3-UI-Komponenten

Empfohlene 10 häufig verwendete AutoComplete-Beispiele, herzlich willkommen zum Download!

AutoComplete-Nutzungszusammenfassung

Das obige ist der detaillierte Inhalt vonEinführung in jQuery-Autocomplete-Beispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!