jQuery オートコンプリートの例の紹介-jsチュートリアル-php.cn

この記事では主に jQuery UI の概要を紹介します。jQuery UI Autocomplete は、これまで使用した中で最も強力で柔軟な Autocomplete です。ローカルの Array/JSON 配列と、ajax 経由でリクエストされた Array/JSON をサポートします。データの取得には、配列、JSONP、および関数 (最も柔軟な) メソッドが使用されます。

jQuery UI オートコンプリートは、私がこれまで使用した中で最も強力で柔軟なオートコンプリートコンポーネントです。ローカルの配列/JSON 配列、ajax、JSONP、および関数を介してリクエストされた配列/JSON 配列をサポートしています。 ) などのデータ取得方法があります。

サポートされるデータソース

jQuery UI Autocomplete は主に、文字列配列と JSON の 2 つのデータ形式をサポートします。

通常の配列形式については、次のように特別なことは何もありません:

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

ログイン後にコピー

JSON 形式の配列の場合、次のとおり、label 属性と value 属性が必要です:

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

ログイン後にコピー

label 属性は次の目的で使用されます。オートコンプリートポップアップメニューに表示されます。value 属性は、選択後にテキストボックスに割り当てられる値です。

いずれかの属性が指定されていない場合は、次のように他の属性に置き換えます (つまり、value と label が同じ値になります):

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

ログイン後にコピー

label も value も指定されていない場合、その属性は使用できませんオートコンプリートプロンプト用。

また、サーバーから出力される JSON のキーは、次のように二重引用符で囲む必要があることにも注意してください:

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

ログイン後にコピー

そうしないと、parsererror エラーが発生する可能性があります。

主なパラメータ

jQuery UI Autocompleteの一般的に使用されるパラメータは次のとおりです:

1.Source: データソースを指定するために使用され、タイプはString、Array、Functionです

String: サーバー側に使用されますajaxリクエストアドレスの、配列/JSON形式を返します
配列: 文字列配列またはJSON配列
関数(リクエスト、レスポンス): request.term、response([配列])を通じて入力値を取得し、 data; (JSONP はこの方法です)

2.minLength: 入力ボックスの文字列の長さが minLength に達すると、Autocomplete がアクティブになります

3.autoFocus: Autocomplete 選択メニューがポップアップ表示されたら、最初の選択メニューが自動的に選択されます

4.遅延: オートコンプリートのアクティブ化を何ミリ秒遅らせるか

その他のあまり使用されないものはここにはリストされていません。

使用法

ページに次の入力ボックスがあるとします。

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

ログイン後にコピー

AJAX リクエスト
は、次のようにソースをサーバー側のアドレスとして指定することで実装されます:

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

ログイン後にコピー

その後、それを受信しますデフォルトで渡されるパラメータ名は term であることに注意してください:

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\":\"李四\"}]"); }

ログイン後にコピー

ローカル配列/JSON 配列

// 本地字符串数组
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
});

ログイン後にコピー

コールバック関数メソッド

は、ソースを次のように指定することでカスタムデータの取得を実現します。カスタム関数。この関数には主に 2 つのパラメーター (リクエスト、レスポンス) があり、それぞれ入力値の取得と結果の提示に使用されます

データを取得するローカル配列メソッド (新浪微博ログインを模倣)

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);//呈现结果
  }
});

ログイン後にコピー

JSONP メソッドを取得します。データ

公式デモから直接取得、Ajax リクエストをリモートサーバーに送信し、返された結果を処理し、最後にレスポンスを通じてそれを提示します:

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

ログイン後にコピー

メインイベント

jQuery UI Autocomplete にはいくつかのイベントがありますこれは、いくつかの段階で追加の制御に使用できます:

1.create(event, ui): Autocomplete が作成されると、このイベントの外観をある程度制御できます。

2.search(event, ui) ): リクエストを開始する前に、このイベントで false を返すことができます

3.open(event, ui): オートコンプリート結果リストがポップアップしたとき

4.focus(event, ui):オートコンプリート結果リスト内の任意の項目がフォーカスを取得し、ui.item がフォーカスを取得します。項目

5.select(event, ui): オートコンプリート結果リスト内の項目が選択されると、ui.item が選択された項目になります。 item

6.close(event, ui): オートコンプリート結果リストが閉じられたとき

7.change(event, ui): 値が変更されたとき、ui.item が選択された項目になります

項目の属性これらのイベントの ui パラメーター (存在する場合) には、ソースに関係なく、デフォルトで label 属性と value 属性があります。設定されたデータが配列であるか JSON 配列であるかに関係なく、3 つのタイプがあります:

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

ログイン後にコピー

3 番目の場合type の場合、ui.item.id の値も取得できます。

これらのイベントは次の 2 つの方法でバインドできます:

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

ログイン後にコピー

バインドを通じてバインドするために使用されるイベント名は、「autocomplete」 + イベント名です。たとえば、「select」は「autocompleteselect」です。

複数の値のオートコンプリート

通常、複数の値が必要な場合（JavaScript、C#、asp.net）、入力ボックスのオートコンプリートには 1 つの値のみが必要です（JavaScript など）。追加の処理のためにいくつかのイベントをバインドする必要があります:

1. 入力ボックスの値がオートコンプリートの単一の値に置き換えられないようにするには、フォーカスイベントで false を返します。

2. select イベント

3. 1

4 と同じ理由で、要素の keydown イベントに対して何らかの処理を実行します

最後の入力値を取得して結果を提示する

公式デモコードを直接:

// 按逗号分隔多个值
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);
    }
  }));

ログイン後にコピー