twitter bootstrap autocomplete dropdown / combobox com Knockoutjs


114

Eu tenho um requisito onde PRECISO usar o menu suspenso de preenchimento automático de bootstrap, MAS o usuário pode ter um texto de formato livre nesse menu suspenso, se desejar. Antes que você pense sobre TypeAhead, eu poderia usar a caixa de texto Bootstrap TypeAhead, mas preciso ter a lista suspensa porque queremos fornecer alguns valores padrão como opções de início, caso os usuários não saibam o que pesquisar.

Estou usando isso com MVC DropDownListFor, pois cria um controle de seleção para nós.

Eu encontrei este artigo que faz isso para mim.

https://github.com/danielfarrell/bootstrap-combobox/pull/20

Tudo que eu tive que fazer foi tirar o nome do controle de seleção e o controle me deixou inserir texto de forma livre. Tudo bem até agora.

Agora, estou usando isso em conjunto com Knockoutjs. Eu vinculo minhas opções e valor selecionado ao controle de seleção e, em seguida, na linha renderizada de meu modelo, chamo (seletor) .combobox () que torna o controle de seleção um comobobox de bootstrap e adiciona um controle de entrada e oculta o controle de seleção nas cenas atrás.

O problema agora é quando tento obter os valores para postar no servidor, uma vez que o valor que coloquei na caixa de entrada não é uma opção válida das opções que dei para selecionar o controle, está sempre configurando-o para a primeira opção por padrão. Isso porque, eu defini a vinculação do valor selecionado no controle de seleção e não na caixa de entrada que foi criada por bootstrap-combobox.js.

Minha pergunta é como faço para que a caixa de entrada faça a vinculação de dados à mesma propriedade que o controle de seleção foi vinculado.

Quaisquer outras opções ?? Entre em contato se precisar de mais esclarecimentos ou tiver dúvidas. Por favor sugira.

Obrigado.


Encontrei uma solução para minha situação. Usei a caixa de texto TypeAhead em vez de Autocomplete comobox e mostrei a lista suspensa de opções por padrão quando os usuários focaram no controle ou no botão também. Dessa forma, eles sabem o que podem procurar, o que era meu principal requisito.
Krishna Teja Veeramachaneni,

Respostas:


254

Dê uma olhada em Select2 para Bootstrap . Deve ser capaz de fazer tudo o que você precisa.

Outra boa opção é Selectize.js . Parece um pouco mais nativo do Bootstrap.


27
Como você usou Select2 para permitir a entrada de texto que ainda não foi incluído na fonte de dados?
Compcentral

4
Como @compcentral mencionou corretamente, Select2 NÃO PERMITE que você insira qualquer coisa que não esteja na lista de opções. Usar o recurso de marcação (automática) para simular isso é complicado, pois não aceita texto com espaços dentro.
Stas Slabko de

2
Que bom achado! Acabei usando Selectize, pois parece mais Bootstrap.
Steven

1
Devido ao problema apontado por @compcentral e Stas, optei por selecionar selectize.js.
Neil Monroe

1
@compcentral por que você não usa o método de fonte de dados remota?
Clain Dsilva

23

O datalist HTML5 básico funciona? É limpo e você não precisa brincar com o código de terceiros confuso. Tutorial W3SCHOOL

A documentação do MDN é muito eloquente e apresenta exemplos.


3
O principal problema do HTML 5 datalisté que ele não oferece suporte a eventos DOM. Então, toda vez que você seleciona um valor, você tem que sair da caixa de texto correspondente
Pawan

@Pawan Isso não é verdade (mais?). A entrada vinculada ao datalist dispara eventos de mudança e entrada, pelo menos. Veja aqui , os eventos de mudança e entrada acionam um log do console.
Félix Gagnon-Grenier

1
Todos esses anos. Todos esses anos mexendo com bibliotecas de terceiros em vez de uma solução simples e limpa já suportada ...
Félix Gagnon-Grenier




Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.