jQuery UI 자동 완성에서 결과 제한

jQuery UI 자동 완성을 사용하고 있습니다.

 $("#task").autocomplete({
     max:10,
     minLength:3,
     source: myarray
 });          

최대 매개 변수가 작동하지 않고 여전히 10 개 이상의 결과를 얻습니다. 뭔가 빠졌습니까?

다음은 jQueryUI 위젯에 대한 올바른 문서 입니다 . 최대 결과를 제한하기위한 내장 매개 변수는 없지만 쉽게 수행 할 수 있습니다.

$("#auto").autocomplete({
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(myarray, request.term);

        response(results.slice(0, 10));
    }
});

source매개 변수에 함수를 제공 한 다음 slice필터링 된 배열 을 호출 할 수 있습니다 .

실제 예는 다음과 같습니다. http://jsfiddle.net/andrewwhitaker/vqwBP/

당신은 설정할 수 있습니다 minlength, 몇 가지 큰 값으로 옵션을하거나 같은 CSS에 의해 그것을 할 수 있습니다

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}

"Jayantha"와 마찬가지로 CSS를 사용하는 것이 가장 쉬운 방법이지만 더 나은 방법 일 수 있습니다.

.ui-autocomplete { max-height: 200px; overflow-y: scroll; overflow-x: hidden;}

유일한 차이점은 "최대 높이"입니다. 이렇게하면 위젯이 더 작은 높이로 크기를 조정할 수 있지만 200px를 넘지 않아야합니다

에 추가 앤드류의 대답은 , 당신도 할 수 있습니다 소개maxResults 재산과이 방법을 사용합니다 :

$("#auto").autocomplete({ 
    maxResults: 10,
    source: function(request, response) {
        var results = $.ui.autocomplete.filter(src, request.term);
        response(results.slice(0, this.options.maxResults));
    }
});

jsFiddle : http://jsfiddle.net/vqwBP/877/

이것은 코드 가독성 및 유지 관리에 도움이됩니다!

여기 내가 사용한 걸

.ui-autocomplete { max-height: 200px; overflow-y: auto; overflow-x: hidden;}

오버플로 자동으로 스크롤 막대가 표시되지 않아야 할 때 표시되지 않습니다.

CSS 파일에 다음 내용을 추가하여이 문제를 해결할 수 있습니다.

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

결과가 mysql 쿼리에서 나온 경우 mysql 결과를 직접 제한하는 것이 더 효율적입니다.

select [...] from [...] order by [...] limit 0,10

여기서 10은 원하는 최대 행 수입니다.

나는 다음과 같은 방식으로 그것을했다 :

success: function (result) {
response($.map(result.d.slice(0,10), function (item) {
return {
// Mapping to Required columns (Employee Name and Employee No)
label: item.EmployeeName,
value: item.EmployeeNo
}
}
));

jQuery를 사용하면 입력에 자동 완성을 첨부 할 때 기본 설정을 변경할 수 있습니다.

$('#autocomplete-form').autocomplete({
   maxHeight: 200, //you could easily change this maxHeight value
   lookup: array, //the array that has all of the autocomplete items
   onSelect: function(clicked_item){
      //whatever that has to be done when clicked on the item
   }
});

플러그인 : jquery-ui-autocomplete-scroll with scroller 및 limit 결과가 아름답습니다.

$('#task').autocomplete({
  maxShowItems: 5,
  source: myarray
});

위의 모든 솔루션을 시도했지만 내 방식은 다음과 같습니다.

success: function (data) {
    response($.map(data.slice (0,10), function(item) {
    return {
    value: item.nome
    };
    }));
},

최대 매개 변수가 없습니다.

http://docs.jquery.com/UI/Autocomplete

내 경우에는 잘 작동합니다.

source:function(request, response){
    var numSumResult = 0;
    response(
        $.map(tblData, function(rowData) {
            if (numSumResult < 10) {
                numSumResult ++;
                return {
                    label:          rowData.label,
                    value:          rowData.value,
                }
            }
        })
    );
},