Bootstrap typeahead

[Ronaldo Faria Storck Eler 2]

Olá pessoal,

 

estou tentando usar o bootstrap typeahead (autocomplete) em um sistema interno, no entanto, quando utilizdo colocando o array diretamente no código, funciona perfeitamente, mas quando pego os valores de um json remoto, o negócio complica, estou o dia todo com isso e ão consegui resolver...

 

Provavelmente deixei escapar alguma coisa, se alguém puder me ajudar, agradeço...

 

O link com todas as informaçoes estão abaixo:

 

http://www.tenq.com.br/labs/bs/

[xanburzum 169]

ele esta ferando algum erro ?

 

olha este exemplo, autocomplete.asp, a primeira coisa que temos que fazer é incluir jQuery UI e jQuery para o arquivo. Em nosso exemplo, vamos ligar para ajax.googleapis, facilitar as coisas. Inclua as seguintes linhas de código no cabeçalho da página recém-criada:

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js" ></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" ></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css"/>

 

 

Com a primeira linha que incluem a biblioteca jQuery. A segunda linha inclui jQuery UI. E a terceira inclui o jQuery UI css (tema básico).

No head da nossa página autocomplete.asp, adicione a função de preenchimento automático:

 

 

<script type="text/javascript" language="javascript">
<!--
    $(function() {
        $( "#username" ).autocomplete({
            source: "source.asp",
            minLength: 2
    });
    });
// -->
</script>

 

 

 

Como você pode ver, estamos usando o recurso de preenchimento automático de uma forma muito básica (sem fixar qualquer opção particular). Estamos nos referindo a uma caixa de entrada com id = "username", a fonte da função de preenchimento automático será um arquivo chamado "source.asp", eo comprimento mínimo do valor procurado está definido para 2 ("o número mínimo de caracteres o usuário tem que digitar antes da ativação do autocomplete "), agora precisamos inserir o código para a caixa de entrada no corpo de nossa página:

 

 

<input type="text" id="username">

 

 

Vamos introduzir a criação de uma caixa de entrada com um recurso de preenchimento automático. Nós usamos jQuery e jQuery UI, a fim de construir a página asp principal. Agora, precisamos criar a fonte para a lista de itens de preenchimento automático.
O jQuery UI autocomplete widget precisa ter uma fonte em formato JSON, temos que recuperar os dados necessários a partir de um banco de dados e alimentá-lo para o widget de uma forma devidamente formatado.
Um site que me ajudou um pouco na verificação da saída da página source.asp foi JSONLint. Por favor, consulte se você precisa testar sua saída JSON.

Agora, vamos ver o código necessário para obter os dados e formatar corretamente.
A primeira coisa a fazer é declarar algumas variáveis:

 

<%
Dim keywords
Dim keywords_cmd
Dim output 

 

 

Então, prepare o objeto de comando e obter os dados:

 

 

Set keywords_cmd = Server.CreateObject ("ADODB.Command")
keywords_cmd.ActiveConnection = your_connection_string
keywords_cmd.CommandText = "SELECT id, name FROM dbo.users where name like '%"  & Request.QueryString("term") & "%'"
keywords_cmd.Prepared = true
Set keywords = keywords_cmd.Execute

 

 

Acho que precisamos de algumas explicações aqui.
1) Mude o your_connection_string com uma seqüência de conexão adequada para o seu banco de dados (SQL Server, MS Access de qualquer outro).
2) Alterar a consulta de acordo com suas necessidades. No exemplo que estamos recebendo dados de uma tabela chamada "dbo.users". A parte importante é que nós precisamos para filtrar os dados de alguma forma. Porque no nosso exemplo estamos criando uma lista de autocomplete com nomes, precisamos filtrar o conjunto de registros de acordo. O Widget autocomplete passa um parâmetro de URL (termo), a fim de conseguir isso. Então, por favor, tenha cuidado com essa parte. Só para ser mais claro, o filtro no exemplo é conseguir que todos os nomes que contém a seqüência de pesquisa, para filtrar dados usando a seqüência de pesquisa como os primeiros caracteres, é preciso remover% logo após como na cláusula WHERE.

Após o acima, usamos a variável chamada " output " para formatar as informações recuperadas. JSON tem uma estrutura simples, o que pode ser explicado como:

 

[
{"label1": "value1", "label2": "value2"},
{"label1": "value3", "label2": "value4"}
]

 

 

 

Vamos em frente e ver como construí-lo:

 

 

output = "["

While (NOT keywords.EOF)
    output = output & "{""id"":""" & keywords.Fields.item("id") & """,""value"":""" & keywords.Fields.Item("name") & """},"
     keywords.MoveNext()
Wend

keywords.Close()
Set keywords = Nothing

output=Left(output,Len(output)-1)
output = output & "]"
response.write output

%>

 

 

 

Na primeira linha que começar a preencher a variável de saída. Em seguida, abrimos uma região de repetição e acrescentar valores recuperados do nosso banco de dados.
No final da região de repetição, vamos fechar o objeto de comando e configurá-lo para nada.
Finalmente vamos remover a última vírgula na nossa string e fechá-lo com "]". Depois de que a saída da variável resultante (com response.write). Salve o arquivo como "source.asp" (na mesma pasta onde o "autocomplete.asp" arquivo é.

[Ronaldo Faria Storck Eler 2]

Obrigado X@nBuRzUm,

 

vou fazer um teste com esse componente aqui, mas eu gostaria de usar o typeahead mesmo, o curioso é que não apresente nenhum erro, já fiz o teste no firebug, e ele filtra tudo corretamente, só não exibe as opções 'a medida que se vai digitante a partir da 3 caracteres... vou continuar pesquisando...

 

sds

Vale a máxima, " quem não tem cão, caça com gato", o exemplo do X@nBuRzUm funcionou bem, agora é estudar melhor e tentar encaixá-lo no style da aplicação (enquanto não descubro como o typeahead funciona, rs)...

 

Obrigado X@nBuRzUm... vou manter o tópico aberto, para ver se consigo encontrar a solução...

[xanburzum 169]

beleza, vou dar uma olhada no seu code com mais detalhes e tendo novidades posto aqui

[Ronaldo Faria Storck Eler 2]

bem pessoal, consegui (aparentemente) resolver o problema,

 

        $('#demo5').typeahead({
            ajax: {
                url: 'pessoas_autocomplete.asp?option=com_bolsas&task=pessoas.getname&tmpl=component&format=json',
                timeout: 300,
                method: 'get',
                triggerLength: 3,
                displayField: 'nome',
                preDispatch: function (query) {
                    return {
                        nome: query
                    };
                }
            },
            display: 'nome',
            val: 'id',
			itemSelected: displayResult
        });

 

Agora é continuar fazendo testes até descobrir se funciona mesmo...