autocomplete done

This commit is contained in:
Harry Bomrah 2012-11-27 15:55:32 +08:00
parent 46576c6947
commit 9cc518b456
4 changed files with 53 additions and 4 deletions

View File

@ -229,6 +229,8 @@ orbitDesktop.prototype.initializeJournalPapers = function(target,url,cache){ //
}) })
} }
bindHandlers(); bindHandlers();
} }
this.initializeJournalPapers.coAuthorformCallback = function(data){ this.initializeJournalPapers.coAuthorformCallback = function(data){
if(data.success){ if(data.success){

View File

@ -6,6 +6,7 @@
//container=true is the area where the view will be loaded //container=true is the area where the view will be loaded
//load = true is used to load the list element by default //load = true is used to load the list element by default
//response-type = "json"|"script"|"xml|html" default is json //response-type = "json"|"script"|"xml|html" default is json
//autocomplete-list = "listname" an array from which autocomplete will be attached to its respective input or textarea
$.extend($.expr[':'], { $.extend($.expr[':'], {
@ -172,6 +173,7 @@ var orbitDesktop = function(dom){
}) })
} }
}); });
var $widget_fn = $('.widget_fn'),$fn_des = $('.fn_des'); var $widget_fn = $('.widget_fn'),$fn_des = $('.fn_des');
$widget_fn.hover(function(){ $widget_fn.hover(function(){
var fn_name = $(this).find('img').attr('alt'),nth = $(this).parents('.d_cate').index(),des_left = $('.dock_child').eq(nth).width(); var fn_name = $(this).find('img').attr('alt'),nth = $(this).parents('.d_cate').index(),des_left = $('.dock_child').eq(nth).width();
@ -181,6 +183,45 @@ var orbitDesktop = function(dom){
$(this).removeClass('thmc1'); $(this).removeClass('thmc1');
$fn_des.stop(true, true).fadeOut(); $fn_des.stop(true, true).fadeOut();
}); });
var split = function( val ) {
return val.split( /,\s*/ );
}
var extractLast = function( term ) {
return split( term ).pop();
}
var autocompleteListName = null;
$("body").on("keydown","*[autocomplete-list]", function( event ) {
autocompleteListName = $(this).attr("autocomplete-list");
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
$(this).autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
window.o[o.data_method][autocompleteListName], extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
})
})
}; };
this.sub_menu_item = function(dom){ this.sub_menu_item = function(dom){
if(!dom.hasClass('active')){ if(!dom.hasClass('active')){

View File

@ -6,6 +6,7 @@
*= require bootstrap *= require bootstrap
*= require bootstrap-orbit *= require bootstrap-orbit
*= require jquery.miniColors *= require jquery.miniColors
*= require jquery-ui
*= require font-awesome *= require font-awesome
*= require desktopmain *= require desktopmain
*= require desktopmedia *= require desktopmedia

View File

@ -52,7 +52,7 @@
<%= f.text_area :paper_title, size: "20x2", placeholder: "Paper Title", class: "s_grid_6 s_grid"%> <%= f.text_area :paper_title, size: "20x2", placeholder: "Paper Title", class: "s_grid_6 s_grid"%>
</li> </li>
<li class="s_grid_row"> <li class="s_grid_row">
<%= f.text_field :journal_title, size: "20", placeholder: "Journal Title", class: "s_grid_6 s_grid"%> <%= f.text_field :journal_title, size: "20", placeholder: "Journal Title", class: "s_grid_6 s_grid", "autocomplete-list" => "journal_title_autocomplete_list" %>
<span class="icon-plus input_append"></span> <span class="icon-plus input_append"></span>
</li> </li>
<li class="s_grid_row"> <li class="s_grid_row">
@ -113,7 +113,7 @@
<div class="s_grid_con s_form"> <div class="s_grid_con s_form">
<ul> <ul>
<li class="s_grid_row"> <li class="s_grid_row">
<%= f.text_area :authors, size: "20x2", placeholder: "Authors", class: "s_grid_6 s_grid"%> <%= f.text_area :authors, size: "20x2", placeholder: "Authors", class: "s_grid_6 s_grid", "autocomplete-list" => "coauthor_autocomplete_list"%>
<span class="icon-plus input_append"></span> <span class="icon-plus input_append"></span>
</li> </li>
<li class="s_grid_row"> <li class="s_grid_row">
@ -207,6 +207,11 @@
</div> </div>
</div> </div>
</div> </div>
<script> <script type="text/javascript">
orbitDesktop.initializeJournals.prototype.autocomplete = { "journal_title" : <%= @journal_candidate.to_json.html_safe %>, "co_authors_candidate" : <%= @co_author_candidate.to_json.html_safe %> } orbitDesktop.prototype.initializeJournalPapers.journal_title_autocomplete_list = <%= @journal_candidate.to_json.html_safe %>;
orbitDesktop.prototype.initializeJournalPapers.coauthor_autocomplete_list = <%= @co_author_candidate.to_json.html_safe %>;
</script> </script>