-
Notifications
You must be signed in to change notification settings - Fork 10
Technologyjquery
jQuery is one of the standard JavaScript Ajax Libraries. It ships with Ruby on Rails and will be used by us for various things including AJAX and cleaning up usability and user interfaces. There is a powerfull API Documentation of jQuery available: http://api.jquery.com/
I'll try to show some of the functionality of AJAX by the means of our autocompletion. First of all I show the code as a whole, then I'll pick out the AJAX part and describe / explain it in greater detail.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- <link rel="stylesheet" href="/resources/demos/style.css" />-->
<script>
$(function() {
$( "#tags" ).autocomplete({
//http://jqueryui.com/autocomplete/#remote-jsonp
source: function( request, response ) {
$.ajax({
url: "/autocompleteServer-0.0.1-SNAPSHOT/suggest",
dataType: "json",
data: {
numItems: 7,
indexName: "generalindex",
term: request.term
},
success: function( data ){
$.each(data, function(key, val) {
if (key === "suggestionList"){
response( val );
}
if (key ===
});
}
});
},
//http://codeblogging.net/blogs/1/15/
minLength: 1})
.data("ui-autocomplete")._renderItem =
function(ul, item) {
var inner_html = '<a><div class = "list_item_container"><div><img src="'+item.image+'"></div>' + item.suggestion + item.key + '</div></a>';
return $("<li></li>").data("item.autocomplete", item).append(inner_html).appendTo(ul);
}
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Suche: </label>
<input id="tags" />
</div>
</body>
</html>
So our Ajax-request is in our autocompletion, it is the part where we define the origin for our search results. When you override the "source" part of our autocompletion, and want to use an external source, e.g. a server as ours, you can use a function for that, with 2 parameters, '(request, response)'
- the auto complete suggestions will come from componentAutoSuggestionServer and follow the protocol specified on componentAutoSuggestionServer
- a standard autocomplete example in jQuery http://jqueryui.com/autocomplete/
- autocompletions can work within a textbox: http://forum.jquery.com/topic/hashtag-and-mention-autocomplete