Chosen: Buscar da fonte de dados remota

Isso é um pouco melhor do que o jquery auto complete, não é? Eu gostaria de ver fontes de dados remotas eventualmente (a capacidade de fornecer um retorno de chamada para os resultados da pesquisa)

Eu terceiro este pedido. Isso seria muito útil para ter a capacidade de especificar uma fonte remota, assim como o recurso de preenchimento automático da interface do usuário do jQuery.

Ou talvez ainda melhor: Incluir escolhido na interface do usuário do jQuery. :)

+1

mais especificamente, meu +1 é para a ideia de usar uma fonte de dados remota com entrada de texto livre (por exemplo, usando chamadas ajax para ajudar na marcação)

Desculpe, não fui claro o suficiente, mas a integração de "fonte de dados remota" é o que eu quis dizer originalmente, obrigado por apontar isso. Claro, este plugin é muito melhor do que o recurso jQuery Auto Complete. Como daFish comentou, eu adoraria ver isso como parte da própria interface do jQuery.

+1 para suporte a fontes de dados remotas

Eu não entendo. Escolhido é sobre melhor usabilidade e beleza em elementos SELECT , não sobre autocompletar ou buscar dados remotos. Se você deseja dados remotos, colete-os e coloque-os no DOM antes da chamada escolhida…

@juanghurtado : se eu tiver uma caixa de seleção múltipla que contenha 300 mil itens, não posso realmente escrevê-la em html inteiramente. Escolhido fornece a interface perfeita para pesquisar e selecionar. existem muitas outras bibliotecas que fornecem essa funcionalidade, ou seja, [1], [2] e muitas outras. De todos esses Chosen funciona melhor, mas não suporta coleções muito grandes - que é o que o suporte de fonte de dados remoto adicionaria. Além disso, se o Chosen suportasse isso, significaria ter que tirar a capa e manter atualizado um plugin em vez de dois.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

Bem, se você tem 300k itens em seu SELECT item, (IMHO) você está fazendo algo errado… Existem muitas opções para lidar com essa interface de uma maneira melhor.

Escolhido poderia fazer muitas coisas... Como canivetes, poderia fazer muitas coisas (fontes de dados remotas, associação de imagens a itens, filtragem personalizada, consultas AJAX...) e deixar de ser a ferramenta perfeita para apenas um (melhor interface para SELECT tradicional

Em 10/08/2011, às 22:56, ivaynberg escreveu:

@juanghurtado : se eu tiver uma caixa de seleção múltipla que contenha 300 mil itens, não posso realmente escrevê-la em html inteiramente. Escolhido fornece a interface perfeita para pesquisar e selecionar. existem muitas outras bibliotecas que fornecem essa funcionalidade, ou seja, [1], [2] e muitas outras. De todos esses Chosen funciona melhor, mas não suporta coleções muito grandes - que é o que o suporte de fonte de dados remoto adicionaria. Além disso, se o Chosen suportasse isso, significaria ter que tirar a capa e manter atualizado um plugin em vez de dois.

[1] http://loopj.com/jquery-tokeninput/
[2] http://wharsojo.wordpress.com/2008/02/18/jquery-facebook-autocomplete/

Responda a este e-mail diretamente ou visualize-o no GitHub:
https://github.com/harvesthq/chosen/issues/79#issuecomment -1776643

realmente não posso discutir com isso...

Eu quero obter dados remotos ao pesquisar a partir do escolhido, como o plugin jquery autocomplete, por favor me ajude

+1 para ter suporte para dados remotos.

qualquer que seja a sua aparência, sua interface do usuário é boa, mas alguns problemas existem, como não suportar dados remotos.

Eu acho que isso é factível, mas não tão fácil quanto se poderia pensar. Como este é o github e o código aberto, vamos ver algum código.

@juanghurtado Também acho que podemos fazer isso sem sobrecarregar a funcionalidade existente, tanto o jquery quanto o protótipo nos dão tudo o que precisamos para fontes de dados remotas.

results_search() parece ser acionado durante o pressionamento de teclas - é aí que eu substituiria o comportamento padrão do escolhido. Eu preciso cavar um pouco mais fundo, mas parece que se pudermos imitar winnow_results() e adicionar uma maneira de mostrar o comportamento de carregamento (por exemplo, winnow_loading_results()), isso pode funcionar bem.

Outra função a ser observada é winnow_results_clear();

A parte difícil é descobrir como integrar isso suavemente no Chosen. Deveria estar nas opções? Deveria ser apenas uma subclasse? E isso é algo que os desenvolvedores principais deixariam no projeto mestre?

Na verdade - devemos encerrar esta edição, muito trabalho está sendo feito no #162, que parece ser tudo o que queremos.

Apenas pensei em acrescentar que hoje em dia essa funcionalidade é uma obrigação e eu realmente espero que seja implementada em breve. Em todas as outras formas escolhidas é perfeita. :)

O que aconteceu com o problema de busca da fonte de dados remota?

É hora de @pfiller se juntar à conversa, eu acho.

+1 eu adoraria ver isso

Estou carregando os valores remotos de uma só vez quando a página é veiculada, portanto, se eu não puder atualizar ou buscar novos dados, se eu pudesse pelo menos adicionar novas opções à seleção, poderia manter o lado do cliente até que a página fosse atualizada. Portanto, +1 para busca remota e/ou +1 para adicionar novas opções. Espero que isso faça sentido...

+1 para solicitação de jaloka

Tenho uma tabela com 17500 registros e quando carrego a página ela fica lenta e finalmente trava... Acho que se a forma de buscar correspondências na tabela pudesse ser implementada seria o melhor.

Alguém o implementou: https://github.com/meltingice/ajax-chosen

Eu não sou um guru do jQuery e na verdade não sei nada sobre isso. Então, por favor, perdoe minha maneira sem noção de explicar as coisas. Eu realmente não consigo encontrar as palavras certas para descrever meu problema. Eu apenas segui essa instrução simples: adicionei uma classe, coloquei o script e chamei a função. Tudo funcionou muito bem, exceto a página que não tinha entrada de seleção. E não tenho certeza se os dados vão com a ajuda do Ajax. Tudo o que posso supor é que os formulários são gerados a partir da tabela do banco de dados MySQL. Selecione as opções de entrada a partir daí. Pelo menos parecia quando editei a página. Então, quando carrego a página, vejo apenas a classe 'chzn-select' na minha entrada de seleção, o que significa que o script não funciona. Lendo problemas relacionados, entendi que é por causa da fonte de dados remota, mas não entendo como corrigi-lo. Na verdade, eu realmente não entendo o que vocês estão falando aqui. Eu tentei Ajax-escolhido fornecido acima sem sucesso e tentei outros 'hacks' mencionados aqui. Alguém pode explicar com palavras simples é possível fazer algo no meu caso ou não?

Estou usando o jQuery 1.4.2, tentei tanto no Mac OS quanto no Windows. Você pode conferir aqui: http://94.125.8.168/eng/ (clique na aba Search ou Timetable no bloco central chamado Flight information). Seleciona o destino, o número do voo e o aeroporto devem ser escolhidos.

@ffiona Você precisa envolver sua chamada Chosen em uma função pronta para jQuery .

$(document).ready(function() {
  $(".chzn-select").chosen();
});

Por favor, tente manter as perguntas futuras no tópico para um tópico. Se você tiver uma pergunta, você está convidado a abrir um novo problema.

@pfiller esse é um recurso em que vocês estão/ou vão trabalhar? eu tentei todos os outros hacks escolhidos pelo ajax, mas nenhum deles realmente funciona. Eu realmente preciso disso porque estou trabalhando em um aplicativo de bolsa de valores que o usuário digita em símbolos de ações que, como você sabe, podem ter dezenas de milhares deles.

@tudo parece que minha opção para obter a conclusão automática do ajax a partir do escolhido será um tiro no escuro e talvez tenha que procurar alternativas. alguém pode recomendar alguma outra alternativa escolhida com esse recurso?

Eu também criei um recentemente .. https://github.com/ksykulev/chosen-ajax-addition

@ksykulev você tem uma demonstração ao vivo disso em algum lugar?

@jaequery
Apenas rapidamente hackeou um exemplo http://sykulev.com/ajaxchosen/index.html

Eu adicionei o código em /example no meu repositório.

@ksykulev : sua versão faz um ótimo trabalho com seleções simples, obrigado! Aliás, não funciona com multisseleção. Posso dar uma olhada nisso se tiver algum tempo livre.

A versão do @meltingice faz coisas muito estranhas no multiselect também, acho que é porque ele não usa funções Chosen (então todas as coisas que são naturalmente resolvidas na lib original não estão na versão ajax, por exemplo, reposicionamento de entrada e redimensionamento após os resultados serem enviados de volta ao cliente).

@jbbarth : Sim, você está correto, eu não testei com multisseleções, então só posso imaginar que não funcione muito bem. Em termos de integridade da minha biblioteca, posso definitivamente adicionar suporte para eles. Eu vou entrar nele. Obrigado!

acabei rolando minha própria versão com look and feel baseado no Chosen.

https://github.com/ivaynberg/select2

ele suporta conjuntos de dados remotos ajax/jsonp e rolagem infinita (carregamento lento de conjuntos de dados remotos paginados). ainda não há suporte para multisseleção.

@ivaynberg Estou de olho nisso.

Depois de clicar em paródia de recurso com Chosen (especificamente suporte multiseleção tipo tag), você definitivamente deve aumentar este tópico.

Eu amo a aparência do Chosen, mas ele realmente deixa as coisas a desejar na implementação.

Muito, muito bom trabalho!

@ivaynberg Percebi que você ainda tem um código escolhido que calcula especificamente as larguras de entrada da lista suspensa e da pesquisa.

Você pode querer verificar isso: https://github.com/harvesthq/chosen/pull/407

Recentemente, atualizei minha versão escolhida do ajax para oferecer suporte a várias seleções. http://sykulev.com/ajaxchosen/index.html

@justindujardin Select2 master agora tem paridade de recursos. vou dar uma olhada no material de dimensionamento em 407, mas devemos levar mais discussões para o projeto do Select2.

Eu amo o Select2 e recomendo que TODOS mudem para ele. Heh.

@ProLoser – obrigado por isso... exatamente o que eu estava procurando. Parece uma opção muito melhor.

Selecione2 FTW!

Select2 é o caminho a percorrer!

Alguma atualização depois de todos esses anos?

Por que perder esse recurso imp?

hmm... isso fede. Decidi implementar Chosen por causa do realce do texto, mas não percebi que o AJAX seria tão difícil de adicionar. Eu acho que deveria ter ido com select2 se todo mundo está fugindo disso para ir para aquele como uma maneira de atender aos requisitos. :(

É um ótimo recurso. Muitos forks propõem esse recurso, mas a implementação geralmente é caótica. :+1:

Eu criei uma solução fácil de patch de macaco:

AbstractChosen.prototype.winnow_results = (function(winnow_results) {
  return function() {
    if (this.options.source) {
      return this.options.source.call(this.form_field, this.search_field.val(), (function(_this) {
        return function(results) {
          var id, option, select;
          if (results) {
            select = document.createElement('select');
            select.appendChild(document.createElement('option'));
            for (id in results) {
              if (results.hasOwnProperty(id)) {
                option = document.createElement('option');
                option.value = id;
                option.textContent = results[id];
                select.appendChild(option);
              }
            }
            _this.results_data = SelectParser.select_to_array(select);
          }
          return winnow_results.call(_this);
        };
      })(this));
    } else {
      return winnow_results.call(this);
    }
  };
})(AbstractChosen.prototype.winnow_results);

Você pode fornecer uma opção de função 'fonte' para a escolha que será chamada na renderização dos resultados. Ele terá o valor de entrada da string e os argumentos da função de retorno de chamada. A função de retorno de chamada renderiza sugestões. Se os resultados não deveriam ter sido alterados, você deve chamá-lo imediatamente sem argumentos, caso contrário, você pode solicitar resultados e enviá-los para o retorno de chamada quando os obtiver. O objeto de resultados tem este formato: { value: "label", value2: "label2" } . Aqui está um exemplo:

var select = $("#select"),
    value;
select.chosen({
    source: function (val, callback) {
        if (value != val) {
            value = val;
            $.get('/suggestions', { value: value }, callback);
        } else
            callback();
    }
});

O que @faucct sugere parece funcionar. Uma observação menor, porém, é que, se você estiver usando a versão jquery, não poderá acessar o AbstractChosen, fora do escopo escolhido, então você provavelmente deseja adicionar esses arquivos ao escopo escolhido ou precisará modificar o arquivo js escolhido e mova AbstractChosen e SelectParser para escopo global. Outro problema é que, ele atualiza a lista aberta (div's que o escolhido cria), mas não atualiza o "campo de seleção" real, portanto, uma opção que você selecionou se não existir no select pode gerar um erro. Uma coisa a notar também é que, a string que você escreveu é usada para filtrar os resultados que você retorna também. Também funciona toda vez que você digita algo para que você tenha controle manualmente para não fazer chamadas.

Eu encontrei outra extensão é esta: https://github.com/meltingice/ajax-chosen

Funciona muito bem, mas a versão atual está quebrada, você fez algumas pequenas modificações. Você tem que substituir "chzn" por "escolhido", pois a biblioteca escolhida mudou seus nomes internos de CSS. A última alteração que você precisa fazer é acionar "escolhedo: atualizado " em vez de " listz:atualizado ". No readme, ele pede para você corrigir um bug no css, mas já está corrigido em versões mais recentes, então você não precisa fazer isso. Você também pode definir algumas opções úteis e, se o usuário continuar escrevendo, o sistema também cancela as chamadas pendentes.

Esta foi a minha jornada :), espero que ajude.

Eu resolvi esse problema criando um plugin que lida com a fonte de dados remota escolhida, espero que todos possam apreciá-lo

escolhido-remote-source (https://github.com/westonganger/chosen-remote-source)

Todo o código é bastante simples com menos de 200 linhas de código
https://github.com/westonganger/chosen-remote-source/blob/master/src/chosen-remote-source.js

A única parte do Chosen que precisava ser corrigida era a seguinte:

// MONKEY PATCH CHOSEN TO NOT CLEAR THE SELECTED RESULTS UPON SEARCHING WITH
chosen_prototype.show_search_field_default = function() {
  if (this.is_multiple && this.choices_count() < 1 && !this.active_field) {
    this.search_field.val(this.default_text);
    return this.search_field.addClass("default");
  } else {
    if(this.default_text === this.search_field.val()){
      this.search_field.val(""); // ORIGINAL LINE, SURROUNDING IF STATEMENT IS CUSTOM
    }

    return this.search_field.removeClass("default");
  }
};
// END CHOSEN PATCH