[jquery] jQuery UI 자동 완성에서 결과 없음 감지

jQueryUI 1.9

jQueryUI 1.9는 response결과가 반환되지 않았는지 감지하는 데 활용할 수 있는 이벤트로 자동 완성 위젯을 축복했습니다 .

검색이 완료된 후 메뉴가 표시되기 전에 트리거됩니다. 사용자 지정 소스 옵션 콜백이 필요하지 않은 제안 데이터의 로컬 조작에 유용합니다. 이 이벤트는 검색이 완료되면 항상 트리거되며, 결과가 없거나 자동 완성이 비활성화되어 메뉴가 표시되지 않더라도 마찬가지입니다.

따라서이를 염두에두고 jQueryUI 1.8에서 수행해야했던 해킹은 다음으로 대체되었습니다.

$(function() {
    $("input").autocomplete({
        source: /* */,
        response: function(event, ui) {
            // ui.content is the array that's about to be sent to the response callback.
            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) {
                    // Do logic for empty result.
                }
            },
            error: function () {
                response([]);
            }
        });
    }
});