fix: ajax element

Author: saemideluxe

basxbread/layout/components/forms/widgets.py

@@ -1138,7 +1138,7 @@ def __init__(
                 hg.INPUT(type="hidden", lazy_attributes=inputelement_attrs),
                 hg.INPUT(
                     _class=hg.BaseElement(
-                        "bx--text-input",
+                        "bx--text-input bread-ajax-search",
                         hg.If(
                             getattr(errors, "condition", False),
                             " bx--text-input--invalid",
@@ -1154,33 +1154,15 @@ def __init__(
                     onfocusin="this.parentElement.nextElementSibling.nextElementSibling.style.display = 'block'",
                     style="padding-right: 2.5rem",
                 ),
-                hg.SCRIPT(
-                    hg.mark_safe(
-                        """
-                        let elem = document.currentScript;
-                        document.addEventListener('click', (ev) => {
-                            if(!elem.parentElement.parentElement.contains(ev.target))
-                                elem.parentElement.nextElementSibling.nextElementSibling.style.display = 'none'
-                        });
-
-                        document.addEventListener('htmx:load', (ev) => {
-                            $$('.result-item', ev.target)._.bind({'click': (e) => {
-                                elem.previousElementSibling.previousElementSibling.value = e.target.value;
-                                elem.previousElementSibling.value = '';
-                                elem.parentElement.nextElementSibling.firstElementChild.innerText = e.target.innerText;
-                                elem.parentElement.nextElementSibling.style.display = 'flex';
-                                elem.parentElement.nextElementSibling.nextElementSibling.style.display = 'none';
-                            }})
-                        })"""
-                    )
-                ),
                 _class="bx--text-input__field-wrapper",
                 data_invalid=hg.If(getattr(errors, "condition", None), True),
             ),
             Tag(
                 hg.F(
-                    lambda c: hg.resolve_lazy(boundfield, c).field.to_python(
-                        hg.resolve_lazy(boundfield, c).value()
+                    lambda c: type(self).formatter(
+                        hg.resolve_lazy(boundfield, c).field.to_python(
+                            hg.resolve_lazy(boundfield, c).value()
+                        )
                     )
                 ),
                 can_delete=hg.F(
@@ -1206,8 +1188,12 @@ def __init__(
         )
 
 
-def AjaxSearch(url):
-    return type("SubclassedAjaxSearchWidget", (AjaxSearchWidget,), {"url": url})
+def AjaxSearch(url, formatter=str):
+    return type(
+        "SubclassedAjaxSearchWidget",
+        (AjaxSearchWidget,),
+        {"url": url, "formatter": formatter},
+    )
 
 
 class MultiWidget(BaseWidget):

basxbread/static/css/basxbread-main.css

@@ -18811,3 +18811,17 @@ a.bx--header__name {
 .hoverable:hover {
   background-color: #e5e5e5; }
 
+.result-item {
+  padding: 4px;
+  cursor: pointer; }
+
+.result-item:hover {
+  background-color: #e5e5e5; }
+
+.result-list {
+  list-style: none;
+  padding: 4px;
+  position: absolute;
+  background: white;
+  z-index: 999; }
+

basxbread/static/css/basxbread-main.min.css

@@ -322,3 +322,19 @@ a.bx--header__name {
 .hoverable:hover {
   background-color: $hover-ui;
 }
+
+.result-item {
+        padding: 4px;
+        cursor: pointer
+}
+.result-item:hover {
+        background-color: #e5e5e5;
+}
+.result-list
+{
+        list-style: none;
+        padding: 4px;
+        position: absolute;
+        background: white;
+        z-index: 999;
+}