AutoComplete com VisualSearch.js no Grails
29/07/2011 14:28
1
Olá pessoal.
Segue um autocomplete para ser usando em projeto Grails.

1) Cirar um projeto do zero - nome: autocomplete.
2) Baixar o componente VisualSearch.js (http://documentcloud.github.com/visualsearch/#demo) e descompactar. Copiar o diretório autocomplete para a pasta web-app da sua aplicação grails criada.
3) Criar um domain com o nome teste e depois executar com grails generate-all
4) Substituir o código da view edit.gsp por:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>AutoComplete </title>
<style>
body {
font-size: 16px;
line-height: 24px;
background: #FEF3CA;
color: #022;
height: 100%;
overflow: hidden;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
}
div.container {
width: 720px;
margin: 50px 0 50px 50px;
}
p, li {
margin: 16px 0 16px 0;
width: 550px;
}
p.break {
margin-top: 35px;
}
ol {
padding-left: 24px;
}
ol li {
font-weight: bold;
margin-left: 0;
}
a, a:visited {
padding: 0 2px;
text-decoration: none;
background: #f0c095;
color: #252519;
}
a:active, a:hover {
color: #FFF;
background: #C25D00;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 40px;
}
b.header {
font-size: 18px;
}
span.alias {
font-size: 14px;
font-style: italic;
margin-left: 20px;
}
table {
margin: 16px 0; padding: 0;
}
tr, td, th {
margin: 0; padding: 0;
text-align: left;
}
th {
padding: 24px 0 0;
}
tr:first-child th {
padding-top: 0;
}
td {
padding: 6px 15px 6px 0;
}
td.definition {
line-height: 18px;
font-size: 14px;
}
table.downloads td {
padding-left: 18px;
}
.demo-hint {
font-size: 13px;
margin: 0 0 12px 12px;
font-weight: normal;
}
#VS code, #VS pre, #VS tt {
font-family: Monaco, Consolas, "Lucida Console", monospace;
font-size: 12px;
line-height: 18px;
color: #444;
background: none;
}
#VS code {
margin-left: 8px;
padding: 0 0 0 12px;
font-weight: normal;
}
#VS pre {
font-size: 12px;
padding: 2px 0 2px 0;
border-left: 6px solid #829C37;
margin: 12px 0;
}
#search_query {
margin: 18px 0 -24px;
opacity: 0;
}
#search_query .raquo {
font-size: 18px;
line-height: 12px;
font-weight: bold;
margin-right: 4px;
}
</style>

<!--para teste autocomplete -->
<link rel="stylesheet" href="../autocomplete/lib/css/reset.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="../autocomplete/lib/css/icons.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="../autocomplete/lib/css/workspace.css" type="text/css" media="screen" charset="utf-8">


<script type="text/javascript" src="../js/prototype/prototype.js"></script>


<script src="../autocomplete/vendor/jquery-1.6.1.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/vendor/jquery.ui.core.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/vendor/jquery.ui.widget.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/vendor/jquery.ui.position.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/vendor/jquery.ui.autocomplete.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/vendor/underscore-1.1.5.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/vendor/backbone-0.5.0.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/lib/js/visualsearch.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/lib/js/views/search_box.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/lib/js/views/search_facet.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/lib/js/views/search_input.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/lib/js/models/search_facets.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/lib/js/models/search_query.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/lib/js/utils/backbone_extensions.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/lib/js/utils/hotkeys.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/lib/js/utils/jquery_extensions.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/lib/js/utils/search_parser.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/lib/js/utils/inflector.js" type="text/javascript" charset="utf-8"></script>
<script src="../autocomplete/lib/js/templates/templates.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript"> var J = jQuery.noConflict();</script>

</head>
<body>

<!-- Autocomplete -->
<div class="container" id="VS">

<h1><a href="index.html">VisualSearch.js</a></h1>

<h2 id="demo">Demo <span class="demo-hint"><i>Try searching for: <b>account</b>, <b>filter</b>, <b>access</b>, <b>title</b>, <b>city</b>, <b>state</b>, or <b>country</b>.</i></span></h2>

<div id="search_box_container"></div>
<div id="search_query">&nbsp;</div>

<script type="text/javascript" charset="utf-8">
J(document).ready(function() {
VS.init({
container : J('#search_box_container'),
// query : 'country: "South Africa" account: 5-samuel title: "Pentagon Papers"',
query : 'address: "draft11"',
// query : '',
unquotable : [
'text',
'account',
'filter',
'access'
],
callbacks : {
search : function(query) {
var Jquery = J('#search_query');
Jquery.stop().animate({opacity : 1}, {duration: 300, queue: false});
Jquery.html('<span class="raquo">&raquo;</span> You searched for: <b>' + query + '</b>');
clearTimeout(window.queryHideDelay);
window.queryHideDelay = setTimeout(function() {
Jquery.animate({
opacity : 0
}, {
duration: 1000,
queue: false
});
}, 2000);

},
valueMatches : function(category, searchTerm, callback) {
switch (category) {
case 'address':
var retorno;
new Ajax.Updater('foo','/autocomplete/teste/searching',{asynchronous:false,evalScripts:true,onLoading:function(e){},onSuccess:function(e){retorno = e.responseText;},parameters:''});
callback(eval(retorno));
break;
case 'account':
callback([
{ value: '1-amanda', label: 'Amanda' },
{ value: '2-aron', label: 'Aron' },
{ value: '3-eric', label: 'Eric' },
{ value: '4-jeremy', label: 'Jeremy' },
{ value: '5-samuel', label: 'Samuel' },
{ value: '6-scott', label: 'Scott' }
]);
break;
case 'filter':
callback(['published', 'unpublished', 'draft']);
break;
case 'access':
callback(['public', 'private', 'protected']);
break;
case 'title':
callback([
'Pentagon Papers',
'CoffeeScript Manual',
'Laboratory for Object Oriented Thinking',
'A Repository Grows in Brooklyn'
]);
break;
case 'city':
callback([
'Cleveland',
'New York City',
'Brooklyn',
'Manhattan',
'Queens',
'The Bronx',
'Staten Island',
'San Francisco',
'Los Angeles',
'Seattle',
'London',
'Portland',
'Chicago',
'Boston'
])
break;
case 'state':
callback([
"Alabama", "Alaska", "Arizona", "Arkansas", "California",
"Colorado", "Connecticut", "Delaware", "District of Columbia", "Florida",
"Georgia", "Guam", "Hawaii", "Idaho", "Illinois",
"Indiana", "Iowa", "Kansas", "Kentucky", "Louisiana",
"Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana", "Nebraska", "Nevada",
"New Hampshire", "New Jersey", "New Mexico", "New York", "North Carolina",
"North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania",
"Puerto Rico", "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
"Texas", "Utah", "Vermont", "Virginia", "Virgin Islands",
"Washington", "West Virginia", "Wisconsin", "Wyoming"
]);
break
case 'country':
callback([
"China", "India", "United States", "Indonesia", "Brazil",
"Pakistan", "Bangladesh", "Nigeria", "Russia", "Japan",
"Mexico", "Philippines", "Vietnam", "Ethiopia", "Egypt",
"Germany", "Turkey", "Iran", "Thailand", "D. R. of Congo",
"France", "United Kingdom", "Italy", "Myanmar", "South Africa",
"South Korea", "Colombia", "Ukraine", "Spain", "Tanzania",
"Sudan", "Kenya", "Argentina", "Poland", "Algeria",
"Canada", "Uganda", "Morocco", "Iraq", "Nepal",
"Peru", "Afghanistan", "Venezuela", "Malaysia", "Uzbekistan",
"Saudi Arabia", "Ghana", "Yemen", "North Korea", "Mozambique",
"Taiwan", "Syria", "Ivory Coast", "Australia", "Romania",
"Sri Lanka", "Madagascar", "Cameroon", "Angola", "Chile",
"Netherlands", "Burkina Faso", "Niger", "Kazakhstan", "Malawi",
"Cambodia", "Guatemala", "Ecuador", "Mali", "Zambia",
"Senegal", "Zimbabwe", "Chad", "Cuba", "Greece",
"Portugal", "Belgium", "Czech Republic", "Tunisia", "Guinea",
"Rwanda", "Dominican Republic", "Haiti", "Bolivia", "Hungary",
"Belarus", "Somalia", "Sweden", "Benin", "Azerbaijan",
"Burundi", "Austria", "Honduras", "Switzerland", "Bulgaria",
"Serbia", "Israel", "Tajikistan", "Hong Kong", "Papua New Guinea",
"Togo", "Libya", "Jordan", "Paraguay", "Laos",
"El Salvador", "Sierra Leone", "Nicaragua", "Kyrgyzstan", "Denmark",
"Slovakia", "Finland", "Eritrea", "Turkmenistan"
]);
break;
}
},
facetMatches : function(callback) {
callback([
'account', 'filter', 'access', 'title',
{ label: 'city', category: 'location' },
{ label: 'address', category: 'location' },
{ label: 'country', category: 'location' },
{ label: 'state', category: 'location' },
]);
}
}
});
});
</script>

</div>



<!-- END -->
</body>
</html>

5) Modificar a action edit no controller teste do domain criado:
def edit = {
['params':params]
}

6) Criar uma action no controller com o nome teste do domain criado:

def searching = {
/*
def regocorr = []
def query = ""
if(usuario){
query = "select c.assunto.nome from RegOcorr c left join fetch c.audits audits left join fetch c.assunto assunto left join fetch audits.user u left join fetch c.unids n where c.versionamento = 'N' and c.flagdelete = false and u.id = '${usuario.id}' and c.fase!='4' order by c.nome asc"
}
regocorr = br.com.aaf.ocorrencia.RegOcorr.executeQuery(query,[max:50,offset:0])
*/
def retorno = ['published11', 'unpublished11', 'draft11']
render retorno

}


Rodar a aplicação e chamar a action:
Exemplo:
http://localhost:8080/autocomplete/teste/edit

Pronto. Você tem um autocomplete no seu projeto:

Obs.: Faça a alteração nesta linha para contemplar a sua chamada no controller e aplicação corretamente:

new Ajax.Updater('foo','/autocomplete/teste/searching',{asynchronous:false,evalScripts:true,onLoading:function(e){},onSuccess:function(e){retorno = e.responseText;},parameters:''});
Tags: Autocomplete


0
Muito legal Stefano. Dica: coloque seu código entre [ code ] (sem espaços), assim ele aparece destacado nos seus posts.



Ainda não faz parte da comunidade???

Para se registrar, clique aqui.


Aprenda Groovy e Grails com a Formação itexto!

Newsletter Semana Groovy

Assinar

Envie seu link!


Livro de Grails


/dev/All

Os melhores blogs de TI (e em português) em um único lugar!

 
Creative Commons
RSS Grails Brasil é mantido por itexto Consultoria.
Em caso de problemas contacte Henrique Lobo Weissmann (Kico) por e-mail: kico@itexto.com.br
Todo o conteúdo presente neste site adota o Creative Commons como licença padrão.
Ver: 4.14.0
itexto