집 > 기사 > 웹 프론트엔드 > jQuery 자동완성 예제 소개

jQuery 자동완성 예제 소개

小云云원래의: 2018-01-01 10:27:233350검색

이 글에서는 주로 jQuery Autocomplete에 대한 소개를 소개합니다. jQuery UI Autocomplete는 제가 사용해본 것 중 가장 강력하고 유연한 Autocomplete 구성 요소이며, ajax를 통해 요청된 Array/JSON을 지원합니다. 배열, JSONP 및 함수(가장 유연한)가 데이터를 얻는 데 사용됩니다.

jQuery UI Autocomplete는 제가 사용해 본 자동 완성 기능 중 가장 강력하고 유연한 자동 완성 구성 요소입니다. 이는 ajax, JSONP 및 Function을 통해 요청된 배열/JSON 배열을 지원합니다. ) 및 기타 데이터 획득 방법.

지원되는 데이터 소스

jQuery UI 자동 완성은 주로 문자열 배열과 JSON이라는 두 가지 데이터 형식을 지원합니다.

다음과 같이 일반 배열 형식에는 특별한 것이 없습니다.

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

JSON 형식의 배열의 경우 다음과 같이 레이블 및 값 속성이 있어야 합니다.

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

레이블 속성은 다음과 같이 사용됩니다. 자동 완성 팝업 메뉴에 표시됩니다. value 속성은 선택 후 텍스트 상자에 할당된 값입니다.

속성 중 하나가 지정되지 않으면 다음과 같이 다른 속성으로 대체됩니다(즉, value와 label의 값이 동일함).

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

label과 value 중 어느 것도 지정되지 않으면 속성을 지정할 수 없습니다. 자동 완성 프롬프트에 사용됩니다.

또한 서버에서 출력되는 JSON 키는 다음과 같이 큰따옴표로 묶어야 합니다.

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

그렇지 않으면 파서 오류가 발생할 수 있습니다.

주요 매개변수

jQuery UI Autocomplete에서 일반적으로 사용되는 매개변수는 다음과 같습니다.

1.Source: 데이터 소스를 지정하는 데 사용되며 유형은 String, Array, Function

String: 서버 측에 사용됩니다. ajax 요청 주소, 배열/JSON 형식을 반환합니다
Array: 문자열 배열 또는 JSON 배열
Function(request, response): request.term, response([Array])를 통해 입력 값을 가져와서 표시합니다. data; (JSONP는 이런 식입니다)

2.minLength: 입력 상자의 문자열 길이가 minLength에 도달하면 Autocomplete를 활성화합니다.

3.autoFocus: 자동 완성 선택 메뉴가 나타나면 자동으로 첫 번째 항목을 선택합니다

4.지연: 즉, 자동 완성 활성화를 지연하는 데 몇 밀리초가 걸리는지입니다.

덜 일반적으로 사용되는 기타 항목은 여기에 나열되지 않습니다.

Usage

페이지에 다음 입력 상자가 있다고 가정합니다.

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

AJAX request
는 다음과 같이 소스를 서버측 주소로 지정하여 구현됩니다.

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

그런 다음 수신합니다. 서버 측에서 해당 결과를 출력합니다. 기본적으로 전달되는 매개변수 이름은 용어입니다.

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

Local 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 Function method

는 소스를 다음과 같이 지정하여 사용자 정의 데이터를 획득합니다. 사용자 정의 함수에는 주로 2개의 매개변수(요청, 응답)가 있으며 각각 입력 값을 얻고 결과를 표시하는 데 사용됩니다.

데이터를 얻기 위한 로컬 배열 방법(Sina Weibo 로그인 모방)

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 방법 data

공식 DEMO에서 직접 가져온 것입니다. 원격 서버에 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
});

Main events

jQuery UI Autocomplete에는 몇 가지 이벤트가 있습니다. 일부 단계에서 추가 제어에 사용할 수 있습니다:

1.create(event, ui): 자동 완성이 생성되면 이 이벤트의 모양을 어느 정도 제어할 수 있습니다. ): 요청을 시작하기 전에 이 이벤트에서 false를 반환할 수 있습니다. 요청을 취소하세요

3.open(event, ui): 자동 완성 결과 목록이 나타날 때

4.focus(event, ui): 언제 자동 완성 결과 목록의 모든 항목이 포커스를 받습니다. ui.item이 포커스를 받는 항목입니다. Item

5.select(event, ui): 자동 완성 결과 목록의 항목이 선택되면 ui.item이 선택됩니다. item

6.close(event, ui): 자동완성 결과 목록이 닫힐 때

7.change(event, ui): 값이 변경되면 ui.item이 선택된 항목이 됩니다

항목 속성 이러한 이벤트의 UI 매개변수 중 (있는 경우)에는 소스에 관계없이 기본적으로 레이블 및 값 속성이 있습니다. 설정된 데이터가 배열인지 JSON 배열인지에 관계없이 세 가지 유형이 있습니다.

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

세 번째인 경우 유형을 입력하면 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). 여러 값이 필요한 경우(예: javascript, c#, asp.net) , 추가 처리를 위해 일부 이벤트 바인딩이 필요합니다.

1. 입력 상자의 값이 자동 완성의 단일 값으로 대체되는 것을 방지하려면 포커스 이벤트에서 false를 반환합니다.

2. 이벤트 선택

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

jQuery 자동완성 예제 소개

관련 기사