maybe finished

django_code/templates/static/djangoql/css/completion.css

@@ -0,0 +1,85 @@
+.djangoql-completion {
+  position: absolute;
+  display: none;
+  border: solid 1px #ccc;
+  border-radius: 4px;
+  background: white;
+  background: var(--body-bg, white);
+  min-width: 183px;
+  font-size: 13px;
+}
+
+.djangoql-completion .active {
+  background-color: #79aec8;
+  color: white;
+}
+
+.djangoql-completion ul {
+  padding: 2px 0;
+  margin: 0;
+  max-height: 295px;
+  overflow: auto;
+}
+
+.djangoql-completion li {
+  list-style: none;
+  padding: 4px 10px;
+  cursor: pointer;
+}
+
+.djangoql-completion li:hover {
+  background-color: #c4e9fa;
+  color: black;
+}
+
+.djangoql-completion li i {
+  font-size: 0.9em;
+  color: #ccc;
+  float: right;
+  font-style: normal;
+}
+
+.djangoql-completion .syntax-help {
+  padding: 4px 10px 6px 10px;
+  margin: 0;
+  border-top: solid 1px #ccc;
+  font-size: inherit;
+}
+
+/*
+Pure CSS loading icon. Credit: https://loading.io/css/
+*/
+.djangoql-loading {
+  display: block;
+  position: relative;
+}
+
+.djangoql-loading:after {
+  -moz-animation: djangoql-loading 1.2s linear infinite;
+  -ms-animation: djangoql-loading 1.2s linear infinite;
+  -webkit-animation: djangoql-loading 1.2s linear infinite;
+  animation: djangoql-loading 1.2s linear infinite;
+  border: 2px solid #aaa;
+  border-color: #aaa transparent #aaa transparent;
+  border-radius: 50%;
+  content: " ";
+  display: block;
+  height: 12px;
+  left: 50%;
+  margin: -8px;
+  position: absolute;
+  top: 50%;
+  width: 12px;
+}
+
+@keyframes djangoql-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+
+/*# sourceMappingURL=completion.css.map*/

django_code/templates/static/djangoql/css/completion.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["webpack:///./node_modules/djangoql-completion/dist/completion.css"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,aAAa;EACb,sBAAsB;EACtB,kBAAkB;EAClB,iBAAiB;EACjB,iCAAiC;EACjC,gBAAgB;EAChB,eAAe;AACjB;;AAEA;EACE,yBAAyB;EACzB,YAAY;AACd;;AAEA;EACE,cAAc;EACd,SAAS;EACT,iBAAiB;EACjB,cAAc;AAChB;;AAEA;EACE,gBAAgB;EAChB,iBAAiB;EACjB,eAAe;AACjB;;AAEA;EACE,yBAAyB;EACzB,YAAY;AACd;;AAEA;EACE,gBAAgB;EAChB,WAAW;EACX,YAAY;EACZ,kBAAkB;AACpB;;AAEA;EACE,0BAA0B;EAC1B,SAAS;EACT,0BAA0B;EAC1B,kBAAkB;AACpB;;AAEA;;CAEC;AACD;EACE,cAAc;EACd,kBAAkB;AACpB;;AAEA;EACE,qDAAqD;EACrD,oDAAoD;EACpD,wDAAwD;EACxD,gDAAgD;EAChD,sBAAsB;EACtB,+CAA+C;EAC/C,kBAAkB;EAClB,YAAY;EACZ,cAAc;EACd,YAAY;EACZ,SAAS;EACT,YAAY;EACZ,kBAAkB;EAClB,QAAQ;EACR,WAAW;AACb;;AAEA;EACE;IACE,uBAAuB;EACzB;EACA;IACE,yBAAyB;EAC3B;AACF","file":"css/completion.css","sourcesContent":[".djangoql-completion {\n  position: absolute;\n  display: none;\n  border: solid 1px #ccc;\n  border-radius: 4px;\n  background: white;\n  background: var(--body-bg, white);\n  min-width: 183px;\n  font-size: 13px;\n}\n\n.djangoql-completion .active {\n  background-color: #79aec8;\n  color: white;\n}\n\n.djangoql-completion ul {\n  padding: 2px 0;\n  margin: 0;\n  max-height: 295px;\n  overflow: auto;\n}\n\n.djangoql-completion li {\n  list-style: none;\n  padding: 4px 10px;\n  cursor: pointer;\n}\n\n.djangoql-completion li:hover {\n  background-color: #c4e9fa;\n  color: black;\n}\n\n.djangoql-completion li i {\n  font-size: 0.9em;\n  color: #ccc;\n  float: right;\n  font-style: normal;\n}\n\n.djangoql-completion .syntax-help {\n  padding: 4px 10px 6px 10px;\n  margin: 0;\n  border-top: solid 1px #ccc;\n  font-size: inherit;\n}\n\n/*\nPure CSS loading icon. Credit: https://loading.io/css/\n*/\n.djangoql-loading {\n  display: block;\n  position: relative;\n}\n\n.djangoql-loading:after {\n  -moz-animation: djangoql-loading 1.2s linear infinite;\n  -ms-animation: djangoql-loading 1.2s linear infinite;\n  -webkit-animation: djangoql-loading 1.2s linear infinite;\n  animation: djangoql-loading 1.2s linear infinite;\n  border: 2px solid #aaa;\n  border-color: #aaa transparent #aaa transparent;\n  border-radius: 50%;\n  content: \" \";\n  display: block;\n  height: 12px;\n  left: 50%;\n  margin: -8px;\n  position: absolute;\n  top: 50%;\n  width: 12px;\n}\n\n@keyframes djangoql-loading {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n"],"sourceRoot":""}

django_code/templates/static/djangoql/css/completion_admin.css

@@ -0,0 +1,31 @@
+#changelist #toolbar form textarea#searchbar {
+  width: 80%;
+}
+
+.djangoql-toggle {
+  margin-right: 10px;
+}
+
+.djangoql-help {
+  display: inline-block;
+  float: right;
+  margin-right: 30px;
+}
+
+@media (max-width: 1024px) {
+  .djangoql-help {
+    margin-right: 20px;
+  }
+}
+
+@media (max-width: 767px) {
+  .djangoql-help {
+    margin-right: 5px;
+  }
+}
+
+.clearfix::after {
+  content: "";
+  clear: both;
+  display: table;
+}

django_code/templates/static/djangoql/css/syntax_help.css

@@ -0,0 +1,14 @@
+code {
+  background-color: rgba(27, 31, 35, 0.05);
+  padding: 0.2em;
+}
+
+pre {
+  background-color: rgba(27, 31, 35, 0.05);
+  padding: 5px 40px;
+  margin: 0 0 10px 0;
+}
+
+table {
+  margin: 10px 0;
+}

django_code/templates/static/djangoql/js/completion_admin.js

@@ -0,0 +1,113 @@
+(function (DjangoQL) {
+  'use strict';
+
+  function parseQueryString() {
+    var qs = window.location.search.substring(1);
+    var result = {};
+    var vars = qs.split('&');
+    var i;
+    var l = vars.length;
+    var pair;
+    var key;
+    for (i = 0; i < l; i++) {
+      pair = vars[i].split('=');
+      key = decodeURIComponent(pair[0]);
+      if (key) {
+        if (typeof result[key] !== 'undefined') {
+          if (({}).toString.call(result[key]) !== '[object Array]') {
+            result[key] = [result[key]];
+          }
+          result[key].push(decodeURIComponent(pair[1]));
+        } else {
+          result[key] = decodeURIComponent(pair[1]);
+        }
+      }
+    }
+    return result;
+  }
+
+  // Replace standard search input with textarea and add completion toggle
+  DjangoQL.DOMReady(function () {
+    // use '-' in the param name to prevent conflicts with any model field name
+    var QLParamName = 'q-l';
+    var QLEnabled;
+    var QLEnabledInURL;
+    var QLInput;
+    var QLToggle;
+    var QLPlaceholder = 'Advanced search with Query Language';
+    var originalPlaceholder;
+    var textarea;
+    var input = document.querySelector('input[name=q]');
+    var djangoQL;
+
+    if (!input) {
+      return;
+    }
+    originalPlaceholder = input.placeholder;
+
+    QLEnabledInURL = parseQueryString()[QLParamName];
+    if (QLEnabledInURL === 'on') {
+      QLEnabled = true;
+    } else if (QLEnabledInURL === 'off') {
+      QLEnabled = false;
+    } else {
+      QLEnabled = Boolean(DjangoQL._toggleOnByDefault);
+    }
+
+    function onCompletionToggle(e) {
+      if (e.target.checked) {
+        djangoQL.enableCompletion();
+        QLInput.value = 'on';
+        textarea.placeholder = QLPlaceholder;
+        textarea.focus();
+        djangoQL.popupCompletion();
+      } else {
+        djangoQL.disableCompletion();
+        QLInput.value = 'off';
+        textarea.placeholder = originalPlaceholder;
+        textarea.focus();
+      }
+    }
+
+    if (DjangoQL._enableToggle) {
+      QLInput = document.querySelector('input[name=' + QLParamName + ']');
+      if (!QLInput) {
+        QLInput = document.createElement('input');
+        QLInput.type = 'hidden';
+        input.parentNode.insertBefore(QLInput, input);
+      }
+      QLInput.name = QLParamName;
+      QLInput.value = QLEnabled ? 'on' : 'off';
+
+      QLToggle = document.createElement('input');
+      QLToggle.type = 'checkbox';
+      QLToggle.checked = QLEnabled;
+      QLToggle.className = 'djangoql-toggle';
+      QLToggle.title = QLPlaceholder;
+      QLToggle.onchange = onCompletionToggle;
+      input.parentNode.insertBefore(QLToggle, input);
+    } else {
+      QLEnabled = true;
+    }
+
+    textarea = document.createElement('textarea');
+    textarea.value = input.value;
+    textarea.id = input.id;
+    textarea.name = input.name;
+    textarea.rows = 1;
+    textarea.placeholder = QLEnabled ? QLPlaceholder : originalPlaceholder;
+    textarea.setAttribute('maxlength', 2000);
+    input.parentNode.insertBefore(textarea, input);
+
+    input.parentNode.removeChild(input);
+    textarea.focus();
+
+    djangoQL = new DjangoQL({
+      completionEnabled: QLEnabled,
+      introspections: 'introspect/',
+      syntaxHelp: 'djangoql-syntax/',
+      selector: 'textarea[name=q]',
+      autoResize: true
+    });
+  });
+}(window.DjangoQL));

django_code/templates/static/djangoql/js/completion_admin_toggle.js

@@ -0,0 +1,6 @@
+(function (DjangoQL) {
+  'use strict';
+
+  DjangoQL._enableToggle = true;
+  DjangoQL._toggleOnByDefault = true;
+}(window.DjangoQL));

django_code/templates/static/djangoql/js/completion_admin_toggle_off.js

@@ -0,0 +1,5 @@
+(function (DjangoQL) {
+  'use strict';
+
+  DjangoQL._toggleOnByDefault = false;
+}(window.DjangoQL));