{"id":2860,"date":"2013-03-07T20:43:44","date_gmt":"2013-03-08T02:43:44","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=2860"},"modified":"2013-12-11T17:47:24","modified_gmt":"2013-12-11T23:47:24","slug":"new-jquery-plugin-livesearch","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2013\/03\/07\/new-jquery-plugin-livesearch\/","title":{"rendered":"New jQuery plugin, livesearch<\/code>"},"content":{"rendered":"

Edited 2013-12-11 to use focusout rather than blur event<\/strong><\/p>\r\n

Continuing my adventures<\/a> in developing an online editor, I wanted to be able to do \"live\" searching: having the text scroll to the sought string as it is being typed. I can use my bililiteRange<\/code> utilities<\/a> to find an arbitrary regular expression, but after much hair-pulling, realized that my texthighlight<\/code> plugin<\/a> is just too flaky and hack-dependent to be used reliably. So I went a different route: instead of trying to highlight strings in a <textarea><\/code>, I overlay a <pre><\/code> element desinged to look similar enough to the <textarea><\/code> and highlight the string in that<\/em> with normal HTML. When the user is done typing his search string (signaled by a blur<\/code> event on the <input><\/code> element being typed in), remove the <pre><\/code> and select the desired string in the original <textarea><\/code>. There's a jump but not as bad as with texthighlight<\/code>.<\/p>\r\n

Download the code<\/a>.<\/p>\r\n

See a simple demo<\/a>, a demo that uses the parameters<\/a>, and a demo that searches three elements at once<\/a>.<\/p>\r\n\r\n

Usage<\/h4>\r\n

$('textarea').livesearch()<\/code> returns a function (not<\/em> a jQuery object!) that is intended to be an event handler for the input<\/code>, focus<\/code> and focusout<\/code> events (use focusout<\/code> rather than blur<\/code> since focusout<\/code> allows for bubbling and jQuery delegation). Since Internet Explorer < 9 does not trigger input<\/code>, it can be used with keyup<\/code> events as well. Thus:<\/p>\r\n

<textarea>\r\n<input><\/code><\/pre>\r\n
$('input').on('input focus focusout', $('textarea').livesearch(back, filter))<\/code><\/pre>\r\n
As you type in the <input><\/code> element, its value is passed to new RegExp(input.value)<\/code> and that is sought in the <textarea><\/code>'s text, starting from the current selection. The search display is scrolled to keep the found string in view. If nothing is found or the regular expression is invalid, the original selection is highlighted.<\/p>\r\n
Parameters<\/h4>\r\n
\r\n
back {Boolean}<\/code><\/dt>
Set to true<\/code> to search backwards.<\/dd>\r\n
filter {Function}<\/code><\/dt>
Function to return the regular expression used for the search. For instance, to search only for whole words, use filter = function(string){ return new RegExp ('\\\\b'+string.replace(\/\\w\/g, '')+'\\\\b') }<\/code>. Default: function(string) { try { return new RegExp(string); }catch(e){ return \/(?:)\/ } }<\/code>. The try\/catch<\/code> is important since the input string may not represent a valid regular expression.<\/dd>\r\n<\/dl>\r\n
Styling<\/h4>\r\n
The display of the search process has the following structure:<\/p>\r\n
<pre class=livesearch>\r\nSome text\r\n<span>Search term<\/span>\r\nSome more text\r\n<\/pre><\/code><\/pre>\r\n
At the least, the <pre><\/code> element needs an opaque background (otherwise the underlying element will show through) and the <span><\/code> needs some kind of highlighting so it is distinct from the surrounding text, taking into account the fact that the found string may have zero length (i.e. do something more than text-decoration:underline<\/code>). In the demo I used:<\/p>\r\n
pre.livesearch{\r\n  background: white;\r\n  border: 1px solid black;\r\n}\r\npre.livesearch span {\r\n  border: 1px solid #f0f; \/* will show up even if the string is zero length *\/\r\n  background: #f0f; \/* in demo number 3 *\/\r\n}<\/code><\/pre>\r\n
Events<\/h4>\r\n
Triggers a \"livesearch<\/code>\" event with each input on the <textarea><\/code><\/em> element, with two parameters: the string used to create the regular expression and the result of the exec<\/code><\/a> call. Thus<\/p>\r\n
$('input').on('input focus blur', $('textarea').livesearch());\r\n$('textarea').on('livesearch', function (event, searchstring, result){\r\n  if (result){\r\n    alert(result[0]+' found at position '+result.index);\r\n  }else{\r\n    alert(searchstring+' not Found!');\r\n  }\r\n});<\/code><\/pre>\r\n
Would be a highly annoying way to provide feedback with each keystroke.<\/p>\r\n
When the searching is done (the <input><\/code> element loses focus), triggers a \"livesearchdone<\/code>\" event with the same parameter.<\/p>","protected":false},"excerpt":{"rendered":"Edited 2013-12-11 to use focusout rather than blur event Continuing my adventures in developing an online editor, I wanted to be able to do \"live\" searching: having the text scroll to the sought string as it is being typed. I can use my bililiteRange utilities to find an arbitrary regular expression, but after much hair-pulling, […]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2860"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=2860"}],"version-history":[{"count":15,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2860\/revisions"}],"predecessor-version":[{"id":3036,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2860\/revisions\/3036"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}