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.

autocomplete combobox twitter-bootstrap knockout.js html.dropdownlistfor Krishna Teja Veeramachaneni
fonte
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.

Arnold Daniels
fonte
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.

Juto
fonte
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
3

Select2 for Bootstrap 3 plugin nativo

https://fk.github.io/select2-bootstrap-css/index.html

este plugin usa o plugin select2 jquery

pepita

PM> Install-Package Select2-Bootstrap

Mahesh
fonte
1
Olá. Há alguma diferença com a primeira resposta votada aqui? Você duplicou a sugestão select 2, tanto quanto eu posso ver?
Félix Gagnon-Grenier
1

A combobox Fuel UX tem todos os recursos que você esperaria.

Stas Slabko
fonte
1
Pelo que posso ver, não tem tipo de letra à frente.
jpkeisala