/search/title?json=1&q=Игра
- DEMO/search/title?json=1&q=Игра
- DEMO
/query?q=%QUERY%
-> /search/title?json=1&q=%QUERY%
movies
./query?q=%QUERY%
-> /search/title?json=1&q=%QUERY%
movies
./query?q=%QUERY%
-> /search/title?json=1&q=%QUERY%
movies
./query?q=%QUERY%
-> /search/title?json=1&q=%QUERY%
movies
.<input type="text" name="country" id="autocomplete"/>
$('#autocomplete').autocomplete({
serviceUrl: '/search/title',
paramName: 'q',
transformResult: function(response) {
return {
suggestions: $.map(response.movies, function(movie) {
return {
title: movie.title,
url: movie.url
};
})
};
}
onSelect: function(suggestion) {
alert('You selected: ' + suggestion.url + ', ' + suggestion.title);
}
});
<div class="autocomplete-suggestions">
<div class="autocomplete-group"><strong></strong></div>
<div class="autocomplete-suggestion autocomplete-selected">...</div>
<div class="autocomplete-suggestion">...</div>
<div class="autocomplete-suggestion">...</div>
</div>
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
return data.map(function(movie){return '<a href="' + movie.url + '">' + movie.title + '</a>';}).join('')