{"id":149781,"date":"2013-09-11T20:54:59","date_gmt":"2013-09-12T03:54:59","guid":{"rendered":"http:\/\/css-tricks.com\/?p=149781"},"modified":"2013-09-11T20:55:24","modified_gmt":"2013-09-12T03:55:24","slug":"client-side-full-text-search-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/client-side-full-text-search-css\/","title":{"rendered":"Client-side full-text search in CSS"},"content":{"rendered":"

Clever idea by Fran\u00e7ois Zaninotto. Add to the searchable element a data-index<\/code> attribute which contains all the text content of its children smooshed together. Then you can find matches using the [data-index*=\"\"]<\/code> selector, which is fast. Essentially doubles the DOM weight, but that’s rarely too big of a deal.<\/p>\n","protected":false},"excerpt":{"rendered":"

Clever idea by Fran\u00e7ois Zaninotto. Add to the searchable element a data-index attribute which contains all the text content of its children smooshed together. Then you can find matches using the [data-index*=””] selector, which is fast. Essentially doubles the DOM weight, but that’s rarely too big of a deal.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4,17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":330906,"url":"https:\/\/css-tricks.com\/creating-arrays-in-hasura\/","url_meta":{"origin":149781,"position":0},"title":"Creating Arrays in Hasura","date":"January 4, 2021","format":false,"excerpt":"Hasura is one of my favorite ways to create a managed GraphQL API for my applications. I find it easy and straightforward as well as suitable for a wide range of use cases. However, since working with Hasura, I\u2019ve seen the same question come up again and again: how should\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/hasura.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":711,"url":"https:\/\/css-tricks.com\/fine-use-for-the-adjacent-sibling-selector\/","url_meta":{"origin":149781,"position":1},"title":"Fine Use for the Adjacent Sibling (“+”) Selector","date":"April 18, 2008","format":false,"excerpt":"My friend Richard came to me with an interesting problem yesterday. He was using some API of some kind that was returning to him a big list of companies. Each company had text, and most (but not all) also had an image. He wanted to use the image if they\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":278368,"url":"https:\/\/css-tricks.com\/building-a-donut-chart-with-vue-and-svg\/","url_meta":{"origin":149781,"position":2},"title":"Building a Donut Chart with Vue and SVG","date":"November 7, 2018","format":false,"excerpt":"I recently needed to make a donut chart for a reporting dashboard at work. I wanted it to dynamically calculate its segments based on an arbitrary set of values, have labels, scale well across all screen sizes and devices be accessible, and cross-browser compatible, among other things. This article details\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/donut-chart.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":7690,"url":"https:\/\/css-tricks.com\/dynamic-dropdowns\/","url_meta":{"origin":149781,"position":3},"title":"So You Need To Fill a Dropdown\u00a0Dynamically","date":"October 29, 2010","format":false,"excerpt":"You have one dropdown menu, and depending on the user's choice in that one, a second dropdown gets filled with choices. Let's cover three different ways you can go about that. View Demo \u00a0 Download Files The Markup For our example, the markup will always be the same, just two\u2026","rel":"","context":"In "Advanced"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/10\/database2.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":325860,"url":"https:\/\/css-tricks.com\/creating-ui-components-in-svg\/","url_meta":{"origin":149781,"position":4},"title":"Creating UI Components in SVG","date":"November 23, 2020","format":false,"excerpt":"I\u2019m thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but you have a spec that was designed to create shapes and yet, still has elements, like text, links, and aria labels available to you.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/CleanShot-2020-11-15-at-12.36.14@2x.png?fit=1200%2C627&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":805,"url":"https:\/\/css-tricks.com\/build-your-own-social-home\/","url_meta":{"origin":149781,"position":5},"title":"Build Your Own Social Home!","date":"June 23, 2008","format":false,"excerpt":"Many of us have many \"homes\" on the interwebs. Personally I use Twitter, Flickr, ScrnShots, and Facebook. These web services are cool enough to offer ways to interact with them and pull data out of them without even necessarily visiting the site itself. This is called an API (or Application\u2026","rel":"","context":"In "Advanced"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/socialpage.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/149781"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=149781"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/149781\/revisions"}],"predecessor-version":[{"id":149782,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/149781\/revisions\/149782"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=149781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=149781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=149781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}