Permalink
Browse files

add multiple autocomplete for columns

  • Loading branch information...
Studener, Max
Studener, Max committed Feb 28, 2014
1 parent a223097 commit e0a360f3b836832bc2cc4a86e23531b9aa2e871f
Showing with 17,652 additions and 4 deletions.
  1. +5 −4 app/views/application/main.html.erb
  2. +3 −0 app/views/layouts/application.html.erb
  3. +56 −0 public/javascripts/directives/column_autocomplete.js
  4. +15,040 −0 public/javascripts/jquery/jquery-ui.js
  5. BIN public/stylesheets/images/animated-overlay.gif
  6. BIN public/stylesheets/images/ui-bg_flat_0_aaaaaa_40x100.png
  7. BIN public/stylesheets/images/ui-bg_flat_75_ffffff_40x100.png
  8. BIN public/stylesheets/images/ui-bg_glass_55_fbf9ee_1x400.png
  9. BIN public/stylesheets/images/ui-bg_glass_65_ffffff_1x400.png
  10. BIN public/stylesheets/images/ui-bg_glass_75_dadada_1x400.png
  11. BIN public/stylesheets/images/ui-bg_glass_75_e6e6e6_1x400.png
  12. BIN public/stylesheets/images/ui-bg_glass_95_fef1ec_1x400.png
  13. BIN public/stylesheets/images/ui-bg_highlight-soft_75_cccccc_1x100.png
  14. BIN public/stylesheets/images/ui-icons_222222_256x240.png
  15. BIN public/stylesheets/images/ui-icons_2e83ff_256x240.png
  16. BIN public/stylesheets/images/ui-icons_454545_256x240.png
  17. BIN public/stylesheets/images/ui-icons_888888_256x240.png
  18. BIN public/stylesheets/images/ui-icons_cd0a0a_256x240.png
  19. +1,189 −0 public/stylesheets/jquery-ui.css
  20. +38 −0 public/stylesheets/jquery.ui.accordion.css
  21. +12 −0 public/stylesheets/jquery.ui.all.css
  22. +16 −0 public/stylesheets/jquery.ui.autocomplete.css
  23. +25 −0 public/stylesheets/jquery.ui.base.css
  24. +114 −0 public/stylesheets/jquery.ui.button.css
  25. +93 −0 public/stylesheets/jquery.ui.core.css
  26. +175 −0 public/stylesheets/jquery.ui.datepicker.css
  27. +70 −0 public/stylesheets/jquery.ui.dialog.css
  28. +79 −0 public/stylesheets/jquery.ui.menu.css
  29. +28 −0 public/stylesheets/jquery.ui.progressbar.css
  30. +76 −0 public/stylesheets/jquery.ui.resizable.css
  31. +13 −0 public/stylesheets/jquery.ui.selectable.css
  32. +73 −0 public/stylesheets/jquery.ui.slider.css
  33. +65 −0 public/stylesheets/jquery.ui.spinner.css
  34. +51 −0 public/stylesheets/jquery.ui.tabs.css
  35. +410 −0 public/stylesheets/jquery.ui.theme.css
  36. +21 −0 public/stylesheets/jquery.ui.tooltip.css
@@ -28,7 +28,7 @@
</div>
<!-- connectionWindows pane -->
-<div id='connection_window_pane' class='col-sm-10 full-height ' ng-controller='connectionWindowsController' >
+<div id='connection_window_pane' class='col-sm-10 full-height ' ng-controller='connectionWindowsController' style="padding-left:0px;">
<!-- connectionWindow tabs -->
<div id='navigation_tabs'>
<ul class='nav nav-tabs'>
@@ -46,12 +46,13 @@
<div class='test'>
- <h3>{{connectionWindow.title}}</h3>
+ <h3 style="padding-left:5px;">{{connectionWindow.title}}</h3>
<form ng-submit='submitQuery(connectionWindow.id, connectionWindow.currentSqlQuery)'>
<input id='{{connectionWindow.id}}_sql' ng-model='connectionWindow.currentSqlQuery'
- typeahead="column.name for column in connectionWindow.columns | filter:$viewValue | limitTo:8"
- class='form-control'/>
+ class='form-control'
+ columnautocomplete
+ />
</form>
<br/>
</div>
@@ -2,9 +2,11 @@
<html ng-app='data-pet'>
<head>
<title>DataPet</title>
+ <link rel='stylesheet' type='text/css' href='/stylesheets/jquery.ui.all.css'/>
<link rel='stylesheet' type='text/css' href='/stylesheets/bootstrap/bootstrap.min.css'/>
<link rel='stylesheet' type='text/css' href='/stylesheets/base.css'/>
<script src='/javascripts/jquery/jquery-2.0.3.min.js'></script>
+ <script src='/javascripts/jquery/jquery-ui.js'></script>
<script src='/javascripts/angular/angular.min.js'></script>
<script src='/javascripts/bootstrap/ui-bootstrap.min.js'></script>
<script src='/javascripts/bootstrap/ui-bootstrap-tpls.min.js'></script>
@@ -66,6 +68,7 @@
</div>
+<script src='/javascripts/directives/column_autocomplete.js'></script>
</body>
</html>
@@ -0,0 +1,56 @@
+angular.module('data-pet').directive('columnautocomplete', function() {
+ function split( val ) {
+ return val.split( /\s{1}\s*/ );
+ }
+ function extractLast( term ) {
+ return split( term ).pop();
+ }
+ return {
+ restrict: 'A',
+ require: "ngModel",
+ link: function(scope, element, attrs, ngModel) {
+ $(element).bind( "keydown", function( event ) {
+ if ( event.keyCode === $.ui.keyCode.TAB &&
+ $( this ).data( "ui-autocomplete" ).menu.active ) {
+ event.preventDefault();
+ }
+ })
+ .autocomplete({
+ minLength: 0,
+ source: function( request, response ) {
+ // delegate back to autocomplete, but extract the last term
+
+ connection = scope.connectionWindows.filter(function(connectionWindow){
+ return connectionWindow.active == 'active';
+ })[0];
+ columns = connection && connection.columns.map(function(k){return k.name});
+ response( $.ui.autocomplete.filter(
+ columns, extractLast( request.term ) ).slice(0, 5) );
+ },
+ 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( " " );
+ scope.$apply(read(this.value));
+ return false;
+ }
+ });
+
+
+ function read(value) {
+ ngModel.$setViewValue(value);
+ }
+
+
+ }
+ };
+});
Oops, something went wrong.

0 comments on commit e0a360f

Please sign in to comment.