@@ -123,27 +123,45 @@ function HighlightQuery({ text, query }) {
123123  ) 
124124} 
125125
126- function  SearchResult ( {  result,  autocomplete,  collection,  query } )  { 
127-   let  id  =  useId ( ) 
128- 
126+ function  SearchResult ( {  result,  autocomplete,  collection,  query,  index } )  { 
129127  let  sectionTitle  =  navigation . find ( ( section )  => 
130128    section . links . find ( ( link )  =>  link . href  ===  result . url . split ( '#' ) [ 0 ] ) , 
131129  ) ?. title 
130+ 
132131  let  hierarchy  =  [ sectionTitle ,  result . pageTitle ] . filter ( 
133132    ( x )  =>  typeof  x  ===  'string' , 
134133  ) 
135134
135+   const  id  =  useId ( ) 
136+ 
136137  return  ( 
137138    < li 
138-       className = "group  block cursor-default rounded-lg px-3 py-2 aria-selected:bg-slate-100 dark:aria-selected:bg-slate-700/30 " 
139+       className = "block cursor-default rounded-lg px-3 py-2 " 
139140      aria-labelledby = { `${ id }  -hierarchy ${ id }  -title` } 
140141      { ...autocomplete . getItemProps ( { 
141142        item : result , 
142143        source : collection . source , 
143144      } ) } 
145+       onMouseEnter = { ( e )  =>  { 
146+         e . currentTarget . classList . add ( 'bg-slate-100' ,  'dark:bg-slate-700/30' ) 
147+         const  titleEl  =  e . currentTarget . querySelector ( '[data-title]' ) 
148+         if  ( titleEl )  { 
149+           titleEl . classList . add ( 'text-sky-600' ,  'dark:text-sky-400' ) 
150+           titleEl . classList . remove ( 'text-slate-700' ,  'dark:text-slate-300' ) 
151+         } 
152+       } } 
153+       onMouseLeave = { ( e )  =>  { 
154+         e . currentTarget . classList . remove ( 'bg-slate-100' ,  'dark:bg-slate-700/30' ) 
155+         const  titleEl  =  e . currentTarget . querySelector ( '[data-title]' ) 
156+         if  ( titleEl )  { 
157+           titleEl . classList . remove ( 'text-sky-600' ,  'dark:text-sky-400' ) 
158+           titleEl . classList . add ( 'text-slate-700' ,  'dark:text-slate-300' ) 
159+         } 
160+       } } 
144161    > 
145162      < div 
146163        id = { `${ id }  -title` } 
164+         data-title 
147165        aria-hidden = "true" 
148166        className = "text-sm text-slate-700 group-aria-selected:text-sky-600 dark:text-slate-300 dark:group-aria-selected:text-sky-400" 
149167      > 
@@ -155,28 +173,30 @@ function SearchResult({ result, autocomplete, collection, query }) {
155173          aria-hidden = "true" 
156174          className = "mt-0.5 truncate whitespace-nowrap text-xs text-slate-500 dark:text-slate-400" 
157175        > 
158-           { hierarchy . map ( ( item ,  itemIndex ,  items )  =>  ( 
159-             < Fragment  key = { itemIndex } > 
160-               < HighlightQuery  text = { item }  query = { query }  /> 
161-               < span 
162-                 className = { 
163-                   itemIndex  ===  items . length  -  1 
164-                     ? 'sr-only' 
165-                     : 'mx-2 text-slate-300 dark:text-slate-700' 
166-                 } 
167-               > 
168-                 /
169-               </ span > 
170-             </ Fragment > 
171-           ) ) } 
176+           { hierarchy 
177+             . filter ( ( item )  =>  item  &&  item . trim ( ) . toLowerCase ( )  !==  'untitled' ) 
178+             . map ( ( item ,  itemIndex ,  items )  =>  ( 
179+               < Fragment  key = { itemIndex } > 
180+                 < HighlightQuery  text = { item }  query = { query }  /> 
181+                 < span 
182+                   className = { 
183+                     itemIndex  ===  items . length  -  1 
184+                       ? 'sr-only' 
185+                       : 'mx-2 text-slate-300 dark:text-slate-700' 
186+                   } 
187+                 > 
188+                   /
189+                 </ span > 
190+               </ Fragment > 
191+             ) ) } 
172192        </ div > 
173193      ) } 
174194    </ li > 
175195  ) 
176196} 
177197
178198function  SearchResults ( {  autocomplete,  query,  collection } )  { 
179-   if  ( collection . items . length  ===  0 )  { 
199+   if  ( collection . items [ 0 ] . items . length  ===  0 )  { 
180200    return  ( 
181201      < p  className = "px-4 py-8 text-center text-sm text-slate-700 dark:text-slate-400" > 
182202        Couldn't find what you are looking for? 
@@ -191,21 +211,55 @@ function SearchResults({ autocomplete, query, collection }) {
191211    ) 
192212  } 
193213
214+   let  rawItems  =  [ ] 
215+ 
216+   rawItems  =  collection . items [ 0 ] . items 
217+ 
218+   let  filtered  =  rawItems . filter ( 
219+     ( item )  => 
220+       item  && 
221+       item . title  && 
222+       item . title . trim ( )  !==  ''  && 
223+       item . title . trim ( ) . toLowerCase ( )  !==  'untitled' , 
224+   ) 
225+ 
226+   // if (filtered.length === 0) { 
227+   //   return ( 
228+   //     <p className="px-4 py-8 text-center text-sm text-slate-700 dark:text-slate-400"> 
229+   //       No results found for “ 
230+   //       <span className="break-words text-slate-900 dark:text-white"> 
231+   //         {query} 
232+   //       </span> 
233+   //       ” 
234+   //     </p> 
235+   //   ) 
236+   // } 
237+   let  seenUrls  =  new  Set ( ) 
238+   let  deduped  =  [ ] 
239+   for  ( let  item  of  filtered )  { 
240+     // Only the part before the '#' 
241+     let  baseUrl  =  item . url . split ( '#' ) 
242+     if  ( ! seenUrls . has ( baseUrl ) )  { 
243+       seenUrls . add ( baseUrl ) 
244+       deduped . push ( item ) 
245+     } 
246+   } 
247+ 
194248  return  ( 
195249    < ul  { ...autocomplete . getListProps ( ) } > 
196-       { collection . items . map ( ( result )  =>  ( 
250+       { deduped . map ( ( result ,   index )  =>  ( 
197251        < SearchResult 
198-           key = { result . url } 
252+           key = { ` ${ result . url } - ${ index } ` } 
199253          result = { result } 
200254          autocomplete = { autocomplete } 
201255          collection = { collection } 
202256          query = { query } 
257+           index = { index } 
203258        /> 
204259      ) ) } 
205260    </ ul > 
206261  ) 
207262} 
208- 
209263const  SearchInput  =  forwardRef ( function  SearchInput ( 
210264  {  autocomplete,  autocompleteState,  onClose } , 
211265  inputRef , 
0 commit comments