Usuário com melhor resposta
[InfoPath] Como fazer um campo do tipo autocomplete?

Pergunta
-
Olá,
Tenho uma lista no sharepoint 2010.
Esta lista teve os forms customizados com infopath.
Esta lista possui um campo do tipo consulta para um outra lista.
Esta outra lista possui uns 1500 itens.
Preciso criar um campo de consulta do tipo autocomplete para esta outra lista.
Como posso fazê-lo?
O infopath nos permite fazer isto de forma nativa?
Obrigado
k2rto4-Pb - Analista SharePoint
Respostas
-
Olá k2rto4,
Para utilizar o recurso de autocomplete da maneira que você especificou, recomendo utilizar Javascript e SharePoint Client Object Model.
Para ajudar, há bibliotecas prontas que fazem isso. Por exemplo http://spservices.codeplex.com/
Abs
Gabriel Nóvoa
SharePoint Premier Field Engineer
MCT/MCP/MCDST/MCSA/MCTS/MCITP/MOS/MCPD
- Editado Gabriel NóvoaMicrosoft employee segunda-feira, 3 de fevereiro de 2014 16:08
- Sugerido como Resposta Gabriel NóvoaMicrosoft employee quarta-feira, 5 de fevereiro de 2014 19:35
- Marcado como Resposta TI DEV quinta-feira, 6 de fevereiro de 2014 13:10
-
Olá k2tro4-Pb,
fiz isso duas vezes usando o jQuery UI e um amigo também consegui fazer usando REST.
<script type="text/javascript" src="/Style Library/JS/jquery-1.8.3.min.js"></script>
Segue o código:
<script type="text/javascript" src="/Style Library/JS/jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript">
var CustomAutoComplete = function (fields) {
var listId = _spPageContextInfo.pageListId.replace(/\{/, "").replace(/\}/, "");
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists(guid'" + listId + "')/items?$select=" + extractColumns(fields),
type: "GET",
headers: { "Accept" : "application/json;odata=verbose" },
contentType: "application/json;odata=verbose",
success: function (data) {
var listvalues = data.d;
var jsonobj = [];
for(var key in listvalues.results){
if(typeof(fields) === "string"){
jsonobj.push(listvalues.results[key][fields]);
continue;
}
for(var fkey in fields){
jsonobj.push(listvalues.results[key][fields[fkey]]);
}
}
//NOME DO CAMPO DE BUSCA DA LISTA DO SHAREPOINT
$("#inplaceSearchDiv_WPQ2_lsinput").autocomplete({
source: jsonobj,
mustMatch: false,
messages:{
results: function () {
},
noResults: "No results found."
}
});
},
error: function (errorData) {
alert(errorData.responseText);
}
});
function extractColumns(data){
if(typeof(data) === "string"){
return data;
}
return data.join(",");
}
}
$(document).ready(function(){
CustomAutoComplete(["Nome da Coluna"]);//INSERA O NOME DA COLUNA(PODE SER MAIS DE UMA);
});
</script>
Alan César SharePoint Developer
- Editado Alan Cesar terça-feira, 4 de fevereiro de 2014 17:31
- Sugerido como Resposta Alan Cesar terça-feira, 4 de fevereiro de 2014 20:25
- Marcado como Resposta TI DEV quinta-feira, 6 de fevereiro de 2014 13:10
-
Fala aí,
Não conseguir fazer da forma como que você me indicou. Devo ter errado alguma besteira.
Consegui fazer com o script abaixo:
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../jquery.SPServices-0.5.8.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript"> $(document).ready(function() { $().SPServices.SPAutocomplete({ sourceList: "Nome_Lista", sourceColumn: "Nome/Id_Campo_Lista_Com_Dados", columnName: "Title_Do_Campo_No_Form", ignoreCase: true, numChars: 2, slideDownSpeed: 1000, debug: true }); });</script>
Valeu mesmo!!!!
Abs
k2rto4-Pb - Analista SharePoint
Todas as Respostas
-
Olá k2rto4,
Para utilizar o recurso de autocomplete da maneira que você especificou, recomendo utilizar Javascript e SharePoint Client Object Model.
Para ajudar, há bibliotecas prontas que fazem isso. Por exemplo http://spservices.codeplex.com/
Abs
Gabriel Nóvoa
SharePoint Premier Field Engineer
MCT/MCP/MCDST/MCSA/MCTS/MCITP/MOS/MCPD
- Editado Gabriel NóvoaMicrosoft employee segunda-feira, 3 de fevereiro de 2014 16:08
- Sugerido como Resposta Gabriel NóvoaMicrosoft employee quarta-feira, 5 de fevereiro de 2014 19:35
- Marcado como Resposta TI DEV quinta-feira, 6 de fevereiro de 2014 13:10
-
Olá k2tro4-Pb,
fiz isso duas vezes usando o jQuery UI e um amigo também consegui fazer usando REST.
<script type="text/javascript" src="/Style Library/JS/jquery-1.8.3.min.js"></script>
Segue o código:
<script type="text/javascript" src="/Style Library/JS/jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript">
var CustomAutoComplete = function (fields) {
var listId = _spPageContextInfo.pageListId.replace(/\{/, "").replace(/\}/, "");
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists(guid'" + listId + "')/items?$select=" + extractColumns(fields),
type: "GET",
headers: { "Accept" : "application/json;odata=verbose" },
contentType: "application/json;odata=verbose",
success: function (data) {
var listvalues = data.d;
var jsonobj = [];
for(var key in listvalues.results){
if(typeof(fields) === "string"){
jsonobj.push(listvalues.results[key][fields]);
continue;
}
for(var fkey in fields){
jsonobj.push(listvalues.results[key][fields[fkey]]);
}
}
//NOME DO CAMPO DE BUSCA DA LISTA DO SHAREPOINT
$("#inplaceSearchDiv_WPQ2_lsinput").autocomplete({
source: jsonobj,
mustMatch: false,
messages:{
results: function () {
},
noResults: "No results found."
}
});
},
error: function (errorData) {
alert(errorData.responseText);
}
});
function extractColumns(data){
if(typeof(data) === "string"){
return data;
}
return data.join(",");
}
}
$(document).ready(function(){
CustomAutoComplete(["Nome da Coluna"]);//INSERA O NOME DA COLUNA(PODE SER MAIS DE UMA);
});
</script>
Alan César SharePoint Developer
- Editado Alan Cesar terça-feira, 4 de fevereiro de 2014 17:31
- Sugerido como Resposta Alan Cesar terça-feira, 4 de fevereiro de 2014 20:25
- Marcado como Resposta TI DEV quinta-feira, 6 de fevereiro de 2014 13:10
-
-
k2rto4-Pb,
por nada cara.
Mas, vamos fazer isso funcionar. Tenho um desse aqui funcionando.
Esqueci de avisar: você colocou os arquivos de script (jquery-1.8.3.min.js // jquery-ui-1.10.0.custom.min.js) na sua biblioteca Style Library ? (de acordo com o caminho que te passei, tem uma pasta chama JS dentro da Style Library).
Após fazer isso, é necessário inserir uma Web Part (SP 2013 = Editor de Script // SP 2010 = Editor de HTML) e inserir esse código que te passei.É necessário verificar também se o campo de busca nativa da lista tem o mesmo nome.
" //NOME DO CAMPO DE BUSCA DA LISTA DO SHAREPOINT
$("#inplaceSearchDiv_WPQ2_lsinput").autocomplete({
source: jsonobj,
mustMatch: false,
messages:{
results: function () {
},
noResults: "No results found."
}
});"No Sharepoint 2013 esse campo tem o nome $("#inplaceSearchDiv_WPQ2_lsinput");
E no final do código também existe esse código:
" $(document).ready(function(){
CustomAutoComplete(["Nome da Coluna"]);//INSERA O NOME DA COLUNA(PODE SER MAIS DE UMA);
}); "
Na chamada da função, você deve passar o nome da coluna que deseja ser exibida no autocomplete.
Tenta isso aí.
Abraços!Alan César SharePoint Developer
-
-
Você coloca a web part Editor de Script ou HTML na própria página da exibição da lista.
Na imagem abaixo é um exemplo do AutoComplete, aí você deve fazer um CSS para exibir legal, essa caixa está assim a pedido do cliente.Alan César SharePoint Developer
-
Fala meu amigo,
Não consegui aqui realizar o teste.
Para fazer isto funcionar, eu criar as listas Lista A e a Lista B.
Na Lista A tenho que ter um campo com autocomplete com dados da Lista B.
Na Lista A tenho o campo Valor. Este campo deve ser autocomplete do campo Valores da lista B.
No newform da lista A eu add o seu script.
Segue parte do Script:
//NOME DO CAMPO DE BUSCA DA LISTA DO SHAREPOINT $("#Valores").autocomplete({ source: jsonobj, mustMatch: false, messages:{ results: function () { }, noResults: "No results found." } });
$(document).ready(function(){ CustomAutoComplete(["Valor"]);//INSERA O NOME DA COLUNA(PODE SER MAIS DE UMA); }); </script>
Está certo?
Ainda recebo o erro de 404 Not Found
Valeu
k2rto4-Pb - Analista SharePoint
-
Opa, então cara, esse código busca na mesma lista, esqueci de avisar, você deverá mudar a lista onde ele busca:
" var listId = _spPageContextInfo.pageListId.replace(/\{/, "").replace(/\}/, "");
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists(guid'" + listId + "')/items?$select=" + extractColumns(fields),"
nessa parte deverá passar a lista de onde deseja consultar.Alan César SharePoint Developer
-
Fala aí,
Não conseguir fazer da forma como que você me indicou. Devo ter errado alguma besteira.
Consegui fazer com o script abaixo:
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../jquery.SPServices-0.5.8.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript"> $(document).ready(function() { $().SPServices.SPAutocomplete({ sourceList: "Nome_Lista", sourceColumn: "Nome/Id_Campo_Lista_Com_Dados", columnName: "Title_Do_Campo_No_Form", ignoreCase: true, numChars: 2, slideDownSpeed: 1000, debug: true }); });</script>
Valeu mesmo!!!!
Abs
k2rto4-Pb - Analista SharePoint
-
-
-
Pessoal,
Agora preciso melhorar em dois pontos o campo com autocomplete.
1) Colocar um bom css. Preciso disso por que, após digitar o valor, e o autocomplete preencher o campo, o mesmo diminui de tamanho e depois volta ao normal. Não posso ter o campo sambando na tela.
2) Poder selecionar mais de um item. Acho que será mais fácil fazer assim: Usuário escreve e seleciona um item. Depois ele colocar virgula e começa a digitar novamente. Com isto, o valor presente antes da virgula deve continuar no campo, e o autocomplete deve agir também.
Vou ver se consigo aqui.
Se souberem de algo, favor me avisem.
Abraços
k2rto4-Pb - Analista SharePoint