{"id":3118,"date":"2019-02-20T15:12:14","date_gmt":"2019-02-20T15:12:14","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3118"},"modified":"2023-02-28T09:08:14","modified_gmt":"2023-02-28T09:08:14","slug":"js-tutorial-quick-search-with-jquery-selection","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-quick-search-with-jquery-selection\/","title":{"rendered":"JS Tutorial &#8211; Quick search with jquery selection"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; The \u201csearch a list of things already on the page\u201d idea reminds me of that classic jQuery\u00a0<code>contains<\/code>\u00a0selector.<br \/>\n<iframe style=\"width: 100%;\" title=\"Untitled\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/eYMxLyN?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/eYMxLyN\"><br \/>\nUntitled<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">$.expr[\":\"].CIcontains = $.expr.createPseudo(function (arg) {\r\n  return function (elem) {\r\n    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) &gt;= 0;\r\n  };\r\n});\r\n\r\n\/\/ Every time a key is clicked\r\n$(\"#filter-input\").keyup(function () {\r\n  \/\/ get the text from the box\r\n  var curr_text = $(this).val();\r\n  \/\/ pass it to the function\r\n  filterResults(curr_text);\r\n});\r\n\r\n$(\"#close\").click(function () {\r\n  var curr_text = $(this).val();\r\n  $(\"#filter-input\").val(\"\");\r\n  filterResults(curr_text);\r\n});\r\n\r\nfunction filterResults(curr_text) {\r\n  \/\/ hide all results\r\n  $(\"#filter-results li\").hide();\r\n  \/\/ ... except those which are selected\r\n  $(\"#filter-results li:CIcontains('\" + curr_text + \"')\").show();\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; The \u201csearch a list of things already on the <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-quick-search-with-jquery-selection\/\" title=\"JS Tutorial &#8211; Quick search with jquery selection\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3851,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[297,263,296,103,227],"newstopic":[],"class_list":{"0":"post-3118","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-jquery-selection","9":"tag-js-tutorial","10":"tag-quick-search-jquery","11":"tag-web-design","12":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3118"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3118\/revisions"}],"predecessor-version":[{"id":3120,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3118\/revisions\/3120"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3851"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3118"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}