https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • t
    That was surprisingly simple, now I just have to make it pretty. Maybe mess with some tab indices as well.
  • m
    @User demo?
  • t
    Sure I'll post a demo. Not sure how to fake the server response
  • t
    Here ya go, quick little demo of fetching results and allowing a click to autocomplete the field. Can probably set a trigger on hitting tab to automatically use the first result. https://jsfiddle.net/nm8cua9q/27/
  • b
    Nice, looks a lot like the Active Search demo... https://htmx.org/examples/active-search/
  • t
    Yes, it was based on that, but active search doesn't let you then replace the value of the input
  • t
    And I couldn't figure out how to do it without hyperscript
  • t
    New version with a tab trigger to select the first result. Kinda janky, but it's a starting point. https://jsfiddle.net/nm8cua9q/43/
  • m
    Really cool to see hyperscript in action and being helpful
  • m
    me.parentNode.innerHTML
    can be written 
    my.parentNode.innerHTML
  • m
    I need to get some time to work on hyperscript! We can make this so much better!
  • m
    gah
  • m
    OKOK
  • m
    I think you can say 
    remove my.parentNode.children
    rather than setting the innerHTML
  • m
    OK, I think this should work:
    Copy code
    on click put my.innerText into #search_bar.value then
         remove my.parentNode.children
  • m
    @User what are you using to create code images like this: https://twitter.com/ben_pylo/status/1288184670102970370
  • m
    (please dont'' be a mac only tool...)
  • b
    @mysterious-toddler-20573 https://carbon.now.sh/
  • t
    @mysterious-toddler-20573 Thanks for the tips, I copy/pasted most of that demo from my code which has more content in the div than I want to put in the field, for example, the search result can include some extra info on the subject like "John Smith (ID: 45)" so my.innerText won't actually work. I like the idea of removing the children instead of setting the innerHTML, I'll do that.
  • m
    @User you may be the worlds expert at hyperscript at the moment
  • m
    congratulations?
  • t
    Guess I'll pop the champagne
  • b
    > still wondering about the colon-separated event namespace > @User I still can't think of any counter arguments to namespaced events and in general like the idea. Whether you use a 
    :
    or 
    .
    to separate them seems trivial, I personally prefer the aesthetics of 
    :
    😉
  • t
    Went back and updated my jsfiddle to be "pure" hyperscript with tab-completion behavior https://jsfiddle.net/rpq5syjz/56/
  • t
    Odd things happen if I remove the search result children instead of setting the innerhtml
  • t
    It returns the value of the second child instead of the first. If I didn't know any better I'd say it's a race condition between removing elements one by one and trying to fetch the first one
  • t
    Also the 
    event.preventDefault(true) == null)
    is a bit of a hacky way of preventing tab from leaving the input box without having to chain if statements. The (true) is a workaround for a bug where you can't call functions without parameters.
  • m
    >> you can't call a funciton w/ no parameters >> my shame levels
  • b
    In case you'd want to see htmx in action with server side charting, have a look at demo "x08 chart" here: http://wmo.co/htmxapp2/static/htmxapp2.html This latest addition to my sample htmx application was also made without writing a single line of javascript → thank you htmx! The charts are produced in svg.
  • t
    > I think you can say 
    remove my.parentNode.children
    rather than setting the innerHTML @mysterious-toddler-20573 After some confusing testing, this doesn't work because once you remove the triggering element, that element's parentNode becomes null, so the foreach that is trying to remove children throws an exception (my.parentNode is null)
1...121314...1146Latest