Ogranicz wyniki w autouzupełnianiu interfejsu użytkownika jQuery

126

Używam autouzupełniania interfejsu użytkownika jQuery.

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

Parametr max nie działa i nadal otrzymuję ponad 10 wyników. Czy coś mi brakuje?

Santhosh
źródło
11
Nie ma opcji wywoływanej maxw autouzupełnianiu
Jayantha Lal Sirisena

Odpowiedzi:

272

Oto właściwa dokumentacja dla widżetu jQueryUI . Nie ma wbudowanego parametru ograniczającego maksymalne wyniki, ale możesz to łatwo osiągnąć:

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

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

Możesz podać funkcję do sourceparametru, a następnie wywołaćslice filtrowaną tablicę.

Oto działający przykład: http://jsfiddle.net/andrewwhitaker/vqwBP/

Andrew Whitaker
źródło
7
Działa jak marzenie. Czy jest to bardzo przydatne, jeśli lista autouzupełniania jest bardzo długa (~ 10k wyników) i spowalnia renderowanie HTML.
Benjamin Crouzier
Bardzo dziękuję za to! Teraz mogę pozwolić użytkownikom mieć ogromną listę w localStorage, ale strona działa naprawdę szybko! Śliczny! : D dziękuję bardzo za to! : D tak się cieszę, że znalazłem to rozwiązanie ^ __ ^
Alisso
co się stanie, jeśli na tej samej stronie znajdują się dwa pola autouzupełniania? Kiedy wykonuję wycinek odpowiedzi na obu, oba przestają w ogóle
ciąć
+1 za to rozwiązanie. Dodam minLength: 3, aby zawęzić wyniki. jsfiddle.net/vqwBP/295
Adrian P.
2
W dostarczonym rozwiązaniu jsFiddle zmień wartość wycinka z 10 na 3, a następnie w polu wprowadzania wprowadź znak C. otrzymasz tylko 3 wartości, które dla użytkownika końcowego mogą sprawić, że uwierzy, że są to jedyne dostępne trzy wartości i nie może kontynuować wprowadzania znaków. Wszystko, co sugeruję, to zapewnienie dobrego tekstu pomocy towarzyszącego temu rozwiązaniu (np. Zostanie wyświetlona tylko XX górnych pasujących wyników. Kontynuuj wpisywanie, aby zawęzić wyniki. ”Coś w tym zakresie.
HPWD
45

Możesz ustawić minlengthopcję na dużą wartość lub możesz to zrobić przez css w ten sposób,

.ui-autocomplete { height: 200px; overflow-y: scroll; overflow-x: hidden;}
Jayantha Lal Sirisena
źródło
Geniusz. Uwielbiam prostotę tego rozwiązania i pozwala użytkownikowi zdecydować.
denislexic
18
To jest dość hakerskie. Jeśli masz naprawdę długą listę, a autouzupełnianie zwraca tysiące
trafień
1
Zgadzam się z Vajkiem. To kiepskie rozwiązanie z punktu widzenia skalowalności.
Kiksy,
4
Zgadzam się z Vajkiem. Nie graj z CSS, gdy gra jest w JS.
Adrian P.
Zrobiłem to samo w mojej aplikacji słownikowej. Warto!
Moxet, styczeń 9-14
25

To samo co „Jayantha” powiedział, że użycie css byłoby najłatwiejszym podejściem, ale może być lepsze,

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

Zauważ, że jedyną różnicą jest „maksymalna wysokość”. Umożliwi to zmianę rozmiaru widżetu na mniejszą wysokość, ale nie większą niż 200 pikseli

Sam Battat
źródło
4
Z powodu twojego rozwiązania. Nawet jeśli jest to ważne, omawiamy rozwiązania jQuery. Oferowanie programiście rozwiązania CSS nie jest dobrym pomysłem, gdy problem można rozwiązać za pomocą jQuery. A na koniec to tylko zamaskowanie wyników, a nie rozwiązanie problemu, jak w przyjętej odpowiedzi. Proszę bardzo!
Adrian P.,
3
@SamBattat Używanie css do rozwiązywania problemów z programowaniem to okropny hack. Wyobraź sobie, że próbujesz to debugować!
Christian Payne,
19

Dodając do odpowiedzi Andrzeja , można nawet wprowadzić do maxResultswłasności i używać go w ten sposób:

$("#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/

To powinno pomóc w czytelności kodu i łatwości utrzymania!

Szkopuł
źródło
10

tutaj jest to, czego użyłem

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

Przepełnienie jest automatyczne, więc pasek przewijania nie będzie się wyświetlać, gdy nie powinien.

Desto
źródło
5

Mogłem rozwiązać ten problem, dodając następującą zawartość do mojego pliku CSS:

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}
Sam
źródło
Nie dodawaj „dziękuję” jako odpowiedzi. W rzeczywistości nie dają odpowiedzi na pytanie i mogą być odbierane przez przyszłych gości jako hałas. Zamiast tego zagłosuj na odpowiedzi, które lubisz. W ten sposób przyszli odwiedzający to pytanie zobaczą większą liczbę głosów na tę odpowiedź, a osoba odpowiadająca zostanie również nagrodzona punktami reputacji. Zobacz Dlaczego głosowanie jest ważne .
jps
to jest dokładnie to, czego szukałem! nie ograniczając liczby wyników, ale liczby shwn przedmiotów! thx
Serge insas
Dlaczego ta odpowiedź ma tak mało głosów pozytywnych? Czy coś jest z tym nie tak? U mnie zadziałało, przynajmniej na pierwszy rzut oka.
Szybki
3

Jeśli wyniki pochodzą z zapytania mysql, bardziej efektywne jest bezpośrednie ograniczenie wyniku mysql:

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

gdzie 10 to maksymalna liczba żądanych wierszy

the_nutria
źródło
1
Nie warto sprawdzać bazy danych za każdym razem! Może działać wolno na niektórych serwerach lub w dużej bazie danych. Nawiasem mówiąc, nie głosowałem, ale napisałem to wyjaśnienie. Co ludzie powinni zrobić, kiedy oddają głos. Dzięki.
Adrian P.
2

Zrobiłem to w następujący sposób:

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
}
}
));
AH Jamali
źródło
2

jQuery umożliwia zmianę domyślnych ustawień podczas dołączania autouzupełniania do danych wejściowych:

$('#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
   }
});
myjeeed
źródło
2

Wtyczka: jquery-ui-autocomplete-scroll with scroller i limit wyniki są piękne

$('#task').autocomplete({
  maxShowItems: 5,
  source: myarray
});
KingRider
źródło
2

Wypróbowałem wszystkie powyższe rozwiązania, ale moje działało tylko w ten sposób:

success: function (data) {
    response($.map(data.slice (0,10), function(item) {
    return {
    value: item.nome
    };
    }));
},
Tatiana
źródło
0

W moim przypadku to działa dobrze:

source:function(request, response){
    var numSumResult = 0;
    response(
        $.map(tblData, function(rowData) {
            if (numSumResult < 10) {
                numSumResult ++;
                return {
                    label:          rowData.label,
                    value:          rowData.value,
                }
            }
        })
    );
},
tlberio
źródło