Доработка автокомплита

livestreet · Sep 3, 2015 · 4fd9024 · 4fd9024
1 parent e045c76
commit 4fd9024
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 8 deletions.
diff --git a/frontend/components/field/component.json b/frontend/components/field/component.json
@@ -40,26 +40,30 @@
         "vendor-chosen": "vendor/chosen/chosen.jquery.js",
         "vendor-chosen-order": "vendor/chosen-order/chosen.order.jquery.js",
         "vendor-chosen-ajax": "vendor/ajax-chosen/lib/ajax-chosen.js",
+        "vendor-autocomplete": "vendor/jquery-autocomplete/dist/jquery.autocomplete.js",
         "vendor-parsley": "vendor/parsley/dist/parsley.remote.js",
         "vendor-parsley-ru": "vendor/parsley/i18n/ru.js",
         "vendor-pikaday": "vendor/pikaday/pikaday.js",
         "vendor-pikaday-jquery": "vendor/pikaday/pikaday.jquery.js",
         "vendor-timepicker": "vendor/timepicker/jquery.timepicker.js",
 
+        "autocomplete": "js/autocomplete.js",
+
         "date": "js/field.date.js",
         "time": "js/field.time.js",
 
         "captcha": "js/field.captcha.js",
         "recaptcha": "js/field.recaptcha.js",
 
-        "autocomplete": "js/field.autocomplete.js",
+        "field-autocomplete": "js/field.autocomplete.js",
         "geo": "js/field.geo.js",
         "image-ajax": "js/field.image-ajax.js"
     },
     "styles": {
         "vendor-chosen": "vendor/chosen/chosen.css",
         "vendor-pikaday": "vendor/pikaday/css/pikaday.css",
         "vendor-timepicker": "vendor/timepicker/jquery.timepicker.css",
+        "autocomplete": "css/autocomplete.css",
         "field": "css/field.css"
     }
 }
diff --git a/frontend/components/field/css/autocomplete.css b/frontend/components/field/css/autocomplete.css
@@ -0,0 +1,34 @@
+.autocomplete-suggestions {
+    border: 1px solid #999;
+    background: #FFF;
+    cursor: default;
+    overflow: auto;
+    -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
+    -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
+    box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64);
+}
+.autocomplete-suggestion {
+    padding: 2px 5px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+.autocomplete-no-suggestion {
+    padding: 2px 5px;
+}
+.autocomplete-selected {
+    background: #F0F0F0;
+}
+.autocomplete-suggestions strong {
+    font-weight: bold;
+    color: #000;
+}
+.autocomplete-group {
+    padding: 2px 5px;
+}
+.autocomplete-group strong {
+    font-weight: bold;
+    font-size: 16px;
+    color: #000;
+    display: block;
+    border-bottom: 1px solid #000;
+}
diff --git a/frontend/components/field/js/autocomplete.js b/frontend/components/field/js/autocomplete.js
@@ -0,0 +1,52 @@
+/**
+ * Autocomplete
+ *
+ * @module ls/autocomplete
+ *
+ * @license   GNU General Public License, version 2
+ * @copyright 2013 OOO "ЛС-СОФТ" {@link http://livestreetcms.com}
+ * @author    Denis Shakhov <denis.shakhov@gmail.com>
+ */
+
+(function($) {
+    "use strict";
+
+    $.widget( "livestreet.lsAutocomplete", {
+        /**
+         * Дефолтные опции
+         */
+        options: {
+            multiple: false,
+            // Ссылки
+            urls: {
+                load: null
+            },
+            responseName: 'aItems',
+            params: {}
+        },
+
+        /**
+         * Конструктор
+         *
+         * @constructor
+         * @private
+         */
+        _create: function () {
+            this.element.autocomplete({
+                serviceUrl: this.option( 'urls.load' ),
+                type: 'POST',
+                dataType: 'json',
+                paramName: 'value',
+                delimiter: this.option( 'multiple' ) ? ',' : null,
+                transformResult: function(response) {
+                    return {
+                        suggestions: response[ this.option( 'responseName' ) ]
+                    };
+                }.bind(this),
+                params: {
+                    security_ls_key: LIVESTREET_SECURITY_KEY
+                }
+            });
+        }
+    });
+})(jQuery);
diff --git a/frontend/components/ls-component/component.json b/frontend/components/ls-component/component.json
@@ -6,7 +6,6 @@
         "ls-core": "*"
     },
     "scripts": {
-        "vendor-widget": "vendor/widget.js",
         "ls-component": "js/ls-component.js"
     }
 }
diff --git a/frontend/components/ls-vendor/component.json b/frontend/components/ls-vendor/component.json
@@ -3,10 +3,8 @@
     "version": "1.0.0",
     "scripts": {
         "jquery": "jquery.js",
-        "jquery-ui": "jquery-ui/js/jquery-ui-1.10.2.custom.min.js",
-        "jquery-ui-datepicker-ru": "jquery-ui/js/localization/jquery-ui-datepicker-ru.js",
-
         "browser": "jquery.browser.js",
+        "widget": "widget.js",
         "cookie": "jquery.cookie.js",
         "fileupload": "jquery.fileupload.js",
         "form": "jquery.form.js",
@@ -17,8 +15,5 @@
         "serializejson": "jquery.serializejson.js",
         "timers": "jquery.timers.js",
         "moment": "moment.js"
-    },
-    "styles": {
-        "jquery-ui": "jquery-ui/css/smoothness/jquery-ui-1.10.2.custom.css"
     }
 }