jQueryUI 1.9
jQueryUI 1.9는 response결과가 반환되지 않았는지 감지하는 데 활용할 수 있는 이벤트로 자동 완성 위젯을 축복했습니다 .
검색이 완료된 후 메뉴가 표시되기 전에 트리거됩니다. 사용자 지정 소스 옵션 콜백이 필요하지 않은 제안 데이터의 로컬 조작에 유용합니다. 이 이벤트는 검색이 완료되면 항상 트리거되며, 결과가 없거나 자동 완성이 비활성화되어 메뉴가 표시되지 않더라도 마찬가지입니다.
따라서이를 염두에두고 jQueryUI 1.8에서 수행해야했던 해킹은 다음으로 대체되었습니다.
$(function() {
$("input").autocomplete({
source: ,
response: function(event, ui) {
if (ui.content.length === 0) {
$("#empty-message").text("No results found");
} else {
$("#empty-message").empty();
}
}
});
});
예 : http://jsfiddle.net/andrewwhitaker/x5q6Q/
jQueryUI 1.8
jQueryUI API로이 작업을 수행하는 간단한 방법을 찾을 수 없었지만 autocomplete._response함수를 자신의 것으로 대체 한 다음 기본 jQueryUI 함수 ( 자동 완성의 prototype개체 를 확장하도록 업데이트 됨)를 호출 할 수 있습니다 .
var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
__response.apply(this, [content]);
this.element.trigger("autocompletesearchcomplete", [content]);
};
그런 다음 이벤트 처리기를 이벤트에 바인딩합니다 autocompletesearchcomplete(내용은 검색 결과, 배열 임).
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
여기서 진행되는 것은 자동 완성 response기능을 변수 ( __response)에 저장 한 다음을 사용 apply하여 다시 호출하는 것입니다. 기본 메서드를 호출했기 때문에이 메서드의 악영향을 상상할 수 없습니다. 개체의 프로토 타입을 수정하고 있으므로 모든 자동 완성 위젯에서 작동합니다.
다음은 작동하는 예입니다. . http://jsfiddle.net/andrewwhitaker/VEhyV/
내 예에서는 로컬 배열을 데이터 소스로 사용하지만 그게 중요하지 않다고 생각합니다.
최신 정보: 기본 자동 완성 기능을 확장하여 자체 위젯에 새 기능을 래핑 할 수도 있습니다.
$.widget("ui.customautocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_response: function(contents){
$.ui.autocomplete.prototype._response.apply(this, arguments);
$(this.element).trigger("autocompletesearchcomplete", [contents]);
}
}));
에서 전화 변경 .autocomplete({...}); :
$("input").customautocomplete({..});
그런 다음 autocompletesearchcomplete나중에 맞춤 이벤트에 바인딩합니다 .
$("input").bind("autocompletesearchcomplete", function(event, contents) {
$("#results").html(contents.length);
});
여기에서 예를 참조하십시오 . http://jsfiddle.net/andrewwhitaker/VBTGJ/
이 질문 / 답변이 관심을 끌었 기 때문에이 답변을 다른 방법으로 업데이트 할 것이라고 생각했습니다. 만있을 때이 방법은 가장 유용 하나 페이지에 자동 완성 위젯을. 이 방법은 원격 또는 로컬 소스를 사용하는 자동 완성 위젯에 적용 할 수 있습니다.
var src = [...];
$("#auto").autocomplete({
source: function (request, response) {
var results = $.ui.autocomplete.filter(src, request.term);
if (!results.length) {
$("#no-results").text("No results found!");
} else {
$("#no-results").empty();
}
response(results);
}
});
내부 if 에는 결과가 감지되지 않을 때 실행할 사용자 지정 논리를 배치 할 수 있습니다.
예: http://jsfiddle.net/qz29K/
원격 데이터 소스를 사용하는 경우 다음과 같이 말하십시오.
$("#auto").autocomplete({
source: "my_remote_src"
});
그런 다음 AJAX를 직접 호출하고 0 개의 결과가 반환 될 때 감지 할 수 있도록 코드를 변경해야합니다.
$("#auto").autocomplete({
source: function (request, response) {
$.ajax({
url: "my_remote_src",
data: request,
success: function (data) {
response(data);
if (data.length === 0) {
}
},
error: function () {
response([]);
}
});
}
});