add typeahead.js, fix #362

src/editable-form/editable-form-bootstrap3.js

@@ -21,7 +21,7 @@ Editableform based on Twitter Bootstrap 3
             var defaultClass = 'input-sm';
             
             //bs3 add `form-control` class to standard inputs
-            var stdtypes = 'text,select,textarea,password,email,url,tel,number,range,time'.split(','); 
+            var stdtypes = 'text,select,textarea,password,email,url,tel,number,range,time,typeaheadjs'.split(','); 
             if(~$.inArray(this.input.type, stdtypes)) {
                 this.input.$input.addClass('form-control');
                 if(emptyInputClass) {

src/inputs-ext/typeaheadjs/lib/typeahead.js-bootstrap.css

@@ -0,0 +1,49 @@
+.twitter-typeahead .tt-query,
+.twitter-typeahead .tt-hint {
+  margin-bottom: 0;
+}
+
+.tt-dropdown-menu {
+  min-width: 160px;
+  margin-top: 2px;
+  padding: 5px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+          box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+}
+
+.tt-suggestion {
+  display: block;
+  padding: 3px 20px;
+}
+
+.tt-suggestion.tt-is-under-cursor {
+  color: #fff;
+  background-color: #0081c2;
+  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
+}
+
+.tt-suggestion.tt-is-under-cursor a {
+  color: #fff;
+}
+
+.tt-suggestion p {
+  margin: 0;
+}

src/inputs-ext/typeaheadjs/lib/typeahead.js-bootstrap_fixed.css

@@ -0,0 +1,82 @@
+/*
+.twitter-typeahead {
+    width: 100%;
+    position: relative;
+}
+*/
+.twitter-typeahead .tt-query,
+.twitter-typeahead .tt-hint {
+    margin-bottom: 0;
+    width: 100%;
+   /* height: 34px; */
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.twitter-typeahead .tt-hint {
+    color: #a1a1a1;
+    z-index: 1;
+   /* padding: 6px 12px;*/
+    border: 1px solid transparent;
+}
+
+.twitter-typeahead .tt-query {
+    z-index: 2;
+  /*  border-radius: 4px !important; */
+}
+/*
+.input-group-addon + .twitter-typeahead > .tt-query {
+    border-top-left-radius: 0!important;
+    border-bottom-left-radius: 0!important;
+}
+
+.input-group-appended > .twitter-typeahead > .tt-query {
+    border-top-right-radius: 0!important;
+    border-bottom-right-radius: 0!important;
+}
+  */
+.tt-dropdown-menu {
+    min-width: 160px;
+    margin-top: 2px;
+    padding: 5px 0;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, .2);
+    *border-right-width: 2px;
+    *border-bottom-width: 2px;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding;
+    background-clip: padding-box;
+}
+
+.tt-suggestion {
+    display: block;
+    padding: 3px 20px;
+}
+
+.tt-suggestion.tt-is-under-cursor {
+    color: #fff;
+    background-color: #0081c2;
+    background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+    background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+    background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+    background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
+}
+
+.tt-suggestion.tt-is-under-cursor a {
+    color: #fff;
+}
+
+.tt-suggestion p {
+    margin: 0;
+}

src/inputs-ext/typeaheadjs/typeaheadjs.js

@@ -0,0 +1,86 @@
+/**
+Typeahead.js input, based on [Twitter Typeahead](http://twitter.github.io/typeahead.js) 
+It is mainly replacement of typeahead in Bootstrap 3.
+
+
+@class typeaheadjs
+@extends text
+@since 1.5.0
+@final
+@example
+<a href="#" id="country" data-type="typeaheadjs" data-pk="1" data-url="/post" data-title="Input country"></a>
+<script>
+$(function(){
+    $('#country').editable({
+        value: 'ru',
+        typeahead: {
+            name: 'country',
+            local: [
+                {value: 'ru', tokens: ['Russia']}, 
+                {value: 'gb', tokens: ['Great Britain']}, 
+                {value: 'us', tokens: ['United States']}
+            ],
+            template: function(item) {
+                return item.tokens[0] + ' (' + item.value + ')'; 
+            } 
+        }
+    });
+});
+</script>
+**/
+(function ($) {
+    "use strict";
+    
+    var Constructor = function (options) {
+        this.init('typeaheadjs', options, Constructor.defaults);
+    };
+
+    $.fn.editableutils.inherit(Constructor, $.fn.editabletypes.text);
+
+    $.extend(Constructor.prototype, {
+        render: function() {
+            this.renderClear();
+            this.setClass();
+            this.setAttr('placeholder');
+            this.$input.typeahead(this.options.typeahead);
+            
+            // copy `input-sm | input-lg` classes to placeholder input
+            if($.fn.editableform.engine === 'bs3') {
+                if(this.$input.hasClass('input-sm')) {
+                    this.$input.siblings('input.tt-hint').addClass('input-sm');
+                }
+                if(this.$input.hasClass('input-lg')) {
+                    this.$input.siblings('input.tt-hint').addClass('input-lg');
+                }
+            }
+        }
+    });      
+
+    Constructor.defaults = $.extend({}, $.fn.editabletypes.list.defaults, {
+        /**
+        @property tpl 
+        @default <input type="text">
+        **/         
+        tpl:'<input type="text">',
+        /**
+        Configuration of typeahead itself. 
+        [Full list of options](https://github.com/twitter/typeahead.js#dataset).
+        
+        @property typeahead 
+        @type object
+        @default null
+        **/
+        typeahead: null,
+        /**
+        Whether to show `clear` button 
+        
+        @property clear 
+        @type boolean
+        @default true        
+        **/
+        clear: true
+    });
+
+    $.fn.editabletypes.typeaheadjs = Constructor;      
+    
+}(window.jQuery));