Handle Large Data in Select2 Dropdown

Cele bloga

Po przeczytaniu tego bloga będziesz mógł dowiedzieć się, w jaki sposób poradzisz sobie z dużym zestawem danych w menu rozwijanym Select2.

Opis

W przypadku listy rozwijanej, jeśli korzystasz z biblioteki select2, działa ona bardzo dobrze w przypadku niewielkiej liczby danych, ale gdy dane stają się zbyt duże, możesz napotkać problem powolności. Na przykład załóżmy, że rozwijane opcje 20,000 otwierają listę bibliotek select2 do kilku sekund lub minut. W przypadku tak dużego menu rozwijanego i aby uniknąć tego problemu powolności, select2 zapewnia rozwiązanie alternatywne. W normalnym menu rozwijanym select2 używamy elementu <select>. W elemencie <select> biblioteka select2 wiąże wszystkie opcje za jednym razem, co powoduje spowolnienie dużych danych. Zamiast używać elementu <select>, możesz użyć listy rozwijanej textbox, a biblioteka select2 pomaga powiązać pole tekstowe z menu rozwijanym, dzięki czemu użytkownicy będą mogli wypełnić menu rozwijane. Biblioteka select2 może inteligentnie powiązać zdefiniowane przez użytkownika opcje 20 lub 30 naraz, a pozostałe dane zostaną powiązane podczas wyszukiwania lub przewijania. Uruchomiony kod jest podany poniżej.

<! DOCTYPE html> <html> <head> <link rel = "stylesheet" href = "// cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> < link rel = "arkusz stylów" href = "// cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" /> <link rel = "styleheet" href = "// cdnjs.cloudflare.com /ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css "/> <style> .select2-container-multi .select2-options .select2-search-choice {padding: 5px 5px 5px 18px 1px 2px 1px; } </style> </head> <body> <div class = "container"> <div class = "page-header"> <h20> Select000 Rozwijane menu z podziałem na strony </h100> <p> Aby poprawić wydajność rozwijane z dużymi zestawami danych (elementy 3.1.0 4.15.0) </p> </div> <form method = "post"> <input id = "test" style = "width: 2%;" placeholder = "wpisz liczbę, przewiń, aby uzyskać więcej wyników" name = "data" /> <input type = "submit" value = "Submit" name = "Submit" class = "btn btn-info" /> </form> </div> <script type = "text / javascript" src = '// ajax.googleapis.com/ajax/libs/jquery/3.5.4/jquery.min.js'> </script> <skrypt src = "// cdnjs.cloudflare.com/ajax/libs/lodash.js/2/lodash.min.js "> </script> <skrypt src =" // cdnjs.cloudflare.com/ajax/libs/select2/2/selectXNUMX. min.js "> </script> <script> (function () {// inicjalizuj dropXNUMX dropdown $ ('# test'). selectXNUMX ({data: dropdownData (), placeholder: 'search', multiple: true, / / tworzenie zapytania z funkcją stronicowania. query: function (data) {var pageSize, dataset, that = this; pageSize = 20; // Liczba opcji ładowanych jednocześnie wyniki = []; if (data.term && data.term! == '') {// HEADS UP; dla funkcji _.filter używam podkreślenia (właściwie lo-dash) tutaj results = _.filter (that.data, function (e) {return e.text.toUpperCase (). indexOf (data.term.toUpperCase ()) > = 0;}); } else if (data.term === '') {results = that.data; } data.callback ({results: results.slice ((data.page - 1) * pageSize, data.page * pageSize), więcej: results.length> = data.page * pageSize,}); },}); }) (); // Funkcja pobierania danych demo dla rozwijanej funkcji get_random_word (str) {return str .split (''). Sort (function () {return 0.5 - Math.random ();}). Join ('') ; } // Dla celów testowych tworzymy ogromną liczbę danych demo (elementy 20 000) funkcja dropdownData () {return _.map (_. Range (1, 20000), funkcja (i) {return {id: i , tekst: get_random_word („Szybki brązowy lis przeskakuje nad leniwym psem”) + '' + i,};}); } </script> </body> </html>

Ekran wyjściowy

Obsługa dużych danych w rozwijanej liście Select2
Podsumowanie

Gdy użytkownik prześle ten formularz, system otrzyma wybrane dane w tablicy.


Sunny Saurabh

Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.

Leave a Reply

Your email address will not be published. Required fields are marked *