이 글에서는 주로 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);
}
}));관련 권장 사항:
Ionic3 UI 구성 요소에서 자동 완성을 사용하는 방법
일반적으로 사용되는 자동 완성 사용 예시 10개를 추천합니다. 다운로드를 환영합니다!
위 내용은 jQuery 자동완성 예제 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
