[jquery-ui] jQuery UI 자동 완성에서 결과 제한

Program / 글쓴이

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은 원하는 최대 행 수입니다.