jQuery UI 자동 완료에서 결과 감지 안 함

jQuery UI 자동 완료에서 결과 감지 안 함

저를 지목하기 전에, 저는 이 주제에 대한 6개의 게시물을 검토했습니다만, 이것이 왜 효과가 없는지에 대해서는 여전히 고민하고 있습니다.

내 목표는 자기완성이 0 결과를 산출할 때 탐지하는 것입니다.코드는 다음과 같습니다.

 $.ajax({
   url:'sample_list.foo2',
   type: 'get',
   success: function(data, textStatus, XMLHttpRequest) {
      var suggestions=data.split(",");

  $("#entitySearch").autocomplete({ 
    source: suggestions,
    minLength: 3,
    select: function(e, ui) {  
     entityAdd(ui.item.value);
     },
    open: function(e, ui) { 
     console.log($(".ui-autocomplete li").size());
     },
    search: function(e,ui) {
     console.log("search returned: " + $(".ui-autocomplete li").size());

    },
    close: function(e,ui) {  
     console.log("on close" +  $(".ui-autocomplete li").size());    
     $("#entitySearch").val("");
    }
   }); 

  $("#entitySearch").autocomplete("result", function(event, data) {

   if (!data) { alert('nothing found!'); }

  })
 }
}); 

검색 자체는 정상적으로 동작하므로 문제없이 결과를 표시할 수 있습니다.제가 알기로는 autocomplete("result") 핸들러로 결과를 가로챌 수 있을 것 같습니다.이 경우 전혀 부팅되지 않습니다(결과 수를 참조하지 않는 일반 경보 또는 console.log도 부팅되지 않습니다).열려 있는 이벤트핸들러는 올바른 결과 수(결과가 있는 경우)를 표시하고 검색 및 닫기 이벤트핸들러는 항상 1단계씩 늦어지는 결과 크기를 보고합니다.

뭔가 분명하고 눈부신 걸 놓치고 있는 것 같은데 잘 안 보여요.

jQueryUI 1.9

는 jQueryUI 1.9를 했습니다.response를 반환하지 여부를 할 수 .event : :: 、 결 event 、 : event event event event 。

검색이 완료된 후 메뉴가 표시되기 전에 트리거됩니다.커스텀 송신원옵션 콜백이 필요 없는 제안 데이터의 로컬 조작에 도움이 됩니다.결과가 없거나 자동 완성이 비활성화되어 메뉴가 표시되지 않더라도 검색이 완료되면 이 이벤트가 항상 트리거됩니다.

따라서 이를 염두에 두고 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

작업을 수행할 수 API를 할 수 autocomplete._response사용자 자신의 기능을 사용하여 기본 jQueryUI 함수를 호출합니다(자동 완성 개체를 확장하도록 업데이트됨).

var __response = $.ui.autocomplete.prototype._response;
$.ui.autocomplete.prototype._response = function(content) {
    __response.apply(this, [content]);
    this.element.trigger("autocompletesearchcomplete", [content]);
};

으로 이벤트 를 ""로 바인드합니다.autocompletesearchcomplete, 배열): event(이벤트)

$("input").bind("autocompletesearchcomplete", function(event, contents) {
    $("#results").html(contents.length);
});

뭐냐면요, 자기완성의 자기완성을 예요.response)에 함수(Function to Variable)__response를 사용하여 다시 호출합니다.디폴트 메서드를 호출하고 있기 때문에 이 메서드로 인한 악영향은 상상할 수 없습니다.오브젝트의 프로토타입을 수정하고 있기 때문에 모든 자동 완성 위젯에 대해 작동합니다.

다음으로 작업 예를 제시하겠습니다.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([]);
            }
        });
    }
});

리모트 데이터 소스(MySQL 데이터베이스, PHP, 또는 서버측의 모든 것)를 사용하고 있는 경우는, 클라이언트에 반환할 데이터가 없는 상황(해킹이나 코어 코드 UI 코드를 변경할 필요 없음)에 대처하기 위한 몇개의 보다 깔끔한 방법이 있습니다.

PHP와 MySQL을 원격 데이터 소스로 사용하고 JSON을 사용하여 정보를 전달합니다.제 경우 JSON 요청이 서버로부터 어떤 응답을 받지 못하면 jQuery 예외 오류가 발생하는 것처럼 보였기 때문에 데이터가 없을 때 서버 측에서 빈 JSON 응답을 반환하고 거기에서 클라이언트 응답을 처리하는 것이 더 쉬웠습니다.

if (preg_match("/^[a-zA-Z0-9_]*$/", $_GET['callback'])) {//sanitize callback name
    $callback = $_GET['callback'];
} else { die(); }

die($callback . "([])");

다른 방법은 서버에서 응답 플래그를 반환하여 일치하는 데이터가 없음을 나타내고 응답 플래그의 존재(및 값)에 따라 클라이언트 측에서 작업을 수행하는 것입니다.이 경우 서버의 응답은 다음과 같습니다.

die($callback . "([{'nodata':true}])");

그런 다음 이 플래그 액션을 클라이언트 측에서 수행할 수 있습니다.

$.getJSON('response.php?callback=?', request, function (response) {
    if (typeof response[0].nodata !== 'undefined' && response[0].nodata === true) {
        alert('No data to display!');
    } else {
        //Do whatever needs to be done in the event that there is actually data to display.
    }
});

자동 완성 요소를 초기화한 후 메시지 표시에 기본 스팬을 사용하려면 메시지 옵션을 설정합니다.

$(<yourselector>).autocomplete('option', 'messages', {
    noResults: 'myKewlMessage',
    results: function( amount ) {
        return amount + ( amount > 1 ? " results were" : " result was" ) + " found.";
    }
});

메모: 이것은 실험적인 API입니다(문서화되어 있지 않습니다).jQuery UI 개발자는 문자열 조작 및 국제화를 위한 전체 솔루션을 아직 조사 중입니다.

몇 시간 동안 게임을 한 후, 나는 마침내 보여줄 요령을 찾았다.No match foundjQuery 자동 완성.위의 코드를 보고 간단히 다음 코드를 추가하세요.div저 같은 경우에는#ulNoMatch그리고 그 스타일은 로 설정되어 있다.displap:none콜백 성공 방법에서는 반환된 어레이에 다음 값이 있는지 확인합니다.length == 0거기 있으면 오늘 하루를 잘 보낸 거야! :)

<pre><div class="ui-widget1" style="width: auto;">
    <asp:TextBox ID="txtSearch" class="tb" runat="server" Width="150px">
    </asp:TextBox>
    <ul id="ulNoMatch" class="ui-autocomplete ui-menu ui-widget1 ui-widget1-content ui-corner-all"
        role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 16;
        display: none; width: 150px;">
        <li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">No Matches
            Found</a></li>
    </ul>
    </div><pre>
<b>
<b>

Enter code here

<script>
    $(function () {
        $("input[id$='txtSearch']").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "splah.aspx/GetByName",
                    data: "{ 'strName': '" + request.term.trim() + "' }",
                    dataType: "json",
                    type: "POST",
                    //cacheLength: 1,
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) {
                        return data; },
                    success: function (data) {
                        var found = $.map(data.d, function (item) {
                            return {
                                value: item.Name,
                                id: item.id
                            }
                         });

                         if (found.length == 0)
                         {
                             $("#ulNoMatch").show();
                         }
                         else
                         {
                             $("#ulNoMatch").hide();
                         }
                         response(found);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            select: function (event, ui) {
                $("input[id$='txtSearch']").val(ui.item.label);
                $("input[id$='txtID']").val(ui.item.id);
                return false;
            },
            minLength: 1
        });
    });
</script>

The easiest straight forward way to do it.

$("#search-box").autocomplete({
                    minLength: 2,
                    source:function (request, response) {
                        $.ajax({
                            url: urlPref + "/Api/SearchItems",
                            data: {
                                term: request.term
                            },
                            success: function (data) {
                                if (data.length == 0) {
                                    data.push({
                                        Id: 0,
                                        Title: "No results found"
                                    });
                                }
                                response(data);
                            }
                            });
                        },

function SearchText() {
 $(".autosuggest").autocomplete({
   source: function (request, response) {
    $.ajax({
     type: "POST",
     contentType: "application/json; charset=utf-8",
      url: "Default.aspx/GetAutoCompleteData",
      data: "{'username':'" + document.getElementById('txtSearch').value + "'}",
        dataType: "json",
        success: function (data.d) {
        if ((data.d).length == 0) {
         alert("no result found");
          }
           response(data.d);
         },
         error: function (result) {
              alert("Error");
         }
         });
        }
     });
  }

언급URL : https://stackoverflow.com/questions/4718968/detecting-no-results-on-jquery-ui-autocomplete