'})]}),(0,n.jsx)(e.p,{children:"adjust connected method to log to console"}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.code,{children:"search controller connected"})}),(0,n.jsxs)(e.h2,{id:"set-up-our-references",children:[(0,n.jsx)(e.a,{href:"#set-up-our-references","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"set up our references"]}),(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:`

`}),(0,n.jsx)(e.span,{className:"code-line",children:`

Posts#index

`}),(0,n.jsx)(e.span,{className:"code-line",children:`

Find me in app/views/posts/index.html.erb

`}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsx)(e.span,{className:"code-line",children:` <%= turbo_stream_from :posts %> `}),(0,n.jsx)(e.span,{className:"code-line",children:`

`}),(0,n.jsx)(e.span,{className:"code-line",children:` <%= render @posts %> `}),(0,n.jsx)(e.span,{className:"code-line",children:`

`}),(0,n.jsx)(e.span,{className:"code-line",children:`

`}),(0,n.jsx)(e.span,{className:"code-line",children:` `})]})}),(0,n.jsx)(e.p,{children:"and add the target into the searchController. this will let the search controller reference the element"}),(0,n.jsxs)(e.h2,{id:"make-it-trigger-and-just-log-to-console",children:[(0,n.jsx)(e.a,{href:"#make-it-trigger-and-just-log-to-console","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"make it trigger and just log to console"]}),(0,n.jsxs)(e.h2,{id:"create-our-update-method",children:[(0,n.jsx)(e.a,{href:"#create-our-update-method","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"create our update method"]}),(0,n.jsx)(e.p,{children:"have to start writing custom js here"}),(0,n.jsx)(e.p,{children:"in our case, get the text content then filter the nodelist"}),(0,n.jsx)(e.p,{children:"we can do this - console.log(this.queryTargets) -> [array]"}),(0,n.jsx)(e.p,{children:"or this - console.log(this.queryTarget) -> singular"}),(0,n.jsxs)(e.h2,{id:"make-it-trigger",children:[(0,n.jsx)(e.a,{href:"#make-it-trigger","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"make it trigger"]}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://stimulus.hotwired.dev/reference/actions",children:"https://stimulus.hotwired.dev/reference/actions"})}),(0,n.jsx)(e.p,{children:"shorthands -"}),(0,n.jsx)(e.pre,{children:(0,n.jsxs)(e.code,{className:"code-highlight",children:[(0,n.jsx)(e.span,{className:"code-line",children:`The full set of these shorthand pairs is as follows: `}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsx)(e.span,{className:"code-line",children:`Element Default Event `}),(0,n.jsx)(e.span,{className:"code-line",children:`a click `}),(0,n.jsx)(e.span,{className:"code-line",children:`button click `}),(0,n.jsx)(e.span,{className:"code-line",children:`details toggle `}),(0,n.jsx)(e.span,{className:"code-line",children:`form submit `}),(0,n.jsx)(e.span,{className:"code-line",children:`input input `}),(0,n.jsx)(e.span,{className:"code-line",children:`input type=submit click `}),(0,n.jsx)(e.span,{className:"code-line",children:`select change `}),(0,n.jsx)(e.span,{className:"code-line",children:`textarea input `})]})}),(0,n.jsxs)(e.p,{children:["so we can just write - ",(0,n.jsx)(e.code,{children:''})]}),(0,n.jsx)(e.pre,{className:"language-html",children:(0,n.jsxs)(e.code,{className:"code-highlight language-html",children:[(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"h1"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"class"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"text-4xl font-bold",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Posts#index",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"p"]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"Find me in app/views/posts/index.html.erb",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"input"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"class"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"w-full border",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"placeholder"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"search...",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]})," ",(0,n.jsx)(e.span,{className:"token punctuation",children:"/>"})]}),` `]}),(0,n.jsx)(e.span,{className:"code-line",children:` `}),(0,n.jsx)(e.span,{className:"code-line",children:` <%= turbo_stream_from :posts %> `}),(0,n.jsxs)(e.span,{className:"code-line",children:[" ",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,n.jsx)(e.span,{className:"token attr-name",children:"id"}),(0,n.jsxs)(e.span,{className:"token attr-value",children:[(0,n.jsx)(e.span,{className:"token punctuation attr-equals",children:"="}),(0,n.jsx)(e.span,{className:"token punctuation",children:'"'}),"posts",(0,n.jsx)(e.span,{className:"token punctuation",children:'"'})]}),(0,n.jsx)(e.span,{className:"token punctuation",children:">"})]}),"<%= render @posts %>",(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]}),(0,n.jsxs)(e.span,{className:"code-line",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsxs)(e.span,{className:"token tag",children:[(0,n.jsx)(e.span,{className:"token punctuation",children:""})]}),` `]})]})}),(0,n.jsx)(e.p,{children:"need 3 things -"}),(0,n.jsxs)(e.ul,{children:[(0,n.jsx)(e.li,{children:"targets"}),(0,n.jsx)(e.li,{children:"event"}),(0,n.jsx)(e.li,{children:"controller"})]}),(0,n.jsx)(e.p,{children:(0,n.jsx)(e.code,{children:'data-controller="search"'})}),(0,n.jsx)(e.p,{children:'dont do this - data-target="search.query"'}),(0,n.jsx)(e.p,{children:'do this - data-search-target="query"'}),(0,n.jsxs)(e.h2,{id:"toggles",children:[(0,n.jsx)(e.a,{href:"#toggles","aria-hidden":"true",tabIndex:"-1",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"toggles"]})]})}function v(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(d,a)})):d(a)}var j=v;function w(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(y);})(); ;return Component;

Under Construction 🚧