Handle Large Data in Select2 Dropdown

Objetivos do blog

Após a leitura deste blog, você será capaz de saber como você pode lidar com o grande conjunto de dados no menu suspenso Select2.

Descrição

Para uma lista suspensa, se usar a biblioteca select2, ela funcionará muito bem para o pequeno número de dados, mas quando os dados ficarem muito grandes, você poderá enfrentar a questão da lentidão. Por exemplo, suponha que uma lista suspensa de opções 20,000 e a biblioteca select2 possa levar alguns segundos ou minutos para abrir o menu suspenso. Para um menu suspenso tão grande e para evitar esse problema de lentidão, o select2 fornece uma solução alternativa. No menu suspenso select2 normal, usamos o elemento <select>. No elemento <select>, a biblioteca Select2 vincula todas as opções de uma vez e isso está causando lentidão para os dados grandes. Portanto, em vez de usar o elemento <select>, você pode usar o menu suspenso de caixa de texto e a biblioteca select2 ajuda a vincular a caixa de texto como o menu suspenso, para fornecer o preenchimento do menu suspenso aos usuários. A biblioteca select2 pode ligar de maneira inteligente as opções 20 ou 30 definidas pelo usuário por vez e os dados restantes serão vinculados na pesquisa ou na rolagem. A execução do código é dada abaixo.

<! DOCTYPE html> <html> <head> <link rel = "folha de estilos" href = "// cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> < link rel = "stylesheet" href = "// cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" /> <link rel = "folha de estilo" href = "// cdnjs.cloudflare.com /ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css "/> <estilo> .select2-container-multi .select2-escolhas .select2-search-choice {preenchimento: 5px 5px 5px 18px; } </ style> </ head> <body> <div classe = "contêiner"> <div class = "page-header"> <h1> Menu suspenso Select2 com paginação </ h1> <p> Para melhorar o desempenho do dropdown com grandes conjuntos de dados (itens 20 000) </ p> </ div> <form method = "post"> <input id = "teste" style = "width: 100%;" placeholder = "digite um número, role para obter mais resultados" name = "data" /> <input type = "submit" valor = "Submit" name = "Enviar" class = "btn btn-info" /> </ form> </ div> <script type = "text / javascript" src = '// ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'> </ script> <script src = "// cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js "> </ script> <script src =" // cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2. min.js "> </ script> <script> (function () {// inicializa o select2 suspenso $ ('# teste'). select2 ({dados: dropdownData (), espaço reservado: 'pesquisa', múltiplo: verdadeiro, / / criando consulta com funcionalidade de paginação. consulta: função (dados) {var page Size, dataset, that = this; pageSize = 20; // Número da opção carrega de cada vez results = []; if (data.term && data.term! == '') {// CABEÇA; para a função _.filter eu uso sublinhado (na verdade lo-traço) aqui results = _.filter (that.data, função (e) {return e.text.toUpperCase (). indexOf (data.term.toUpperCase ()) > = 0;}); } else if (data.term === '') {resultados = essa.data; } data.callback ({resultados: results.slice ((data.page - 1) * pageSize, data.page * pageSize), mais: results.length> = data.page * pageSize,}); },}); }) (); // Função para buscar os dados de demonstração para a função do menu dropdown get_random_word (str) {return str .split (''). Sort (function () {retornar 0.5 - Math.random ();}). Join ('') ; } // Para o propósito de teste, estamos fazendo uma grande variedade de dados de demonstração (itens 20 000) dropdownData () {return _.map (_. Range (1, 20000), função (i) {return {id: i texto: get_random_word ('A rápida raposa marrom salta sobre um cachorro preguiçoso') + '' + i,};}); } </ script> </ body> </ html>

Tela de saída

Lidar com dados grandes no menu suspenso Select2
Resumo

Quando o usuário enviar este formulário, o sistema obterá os dados selecionados em uma matriz.


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 *