Question

Part 1: I want the .highlight() function to be active only when the input length is larger than 3. After 3 characters, I want every keystroke to look for this value and apply the .highlight() function (which works fine when using a static value). I am using it as a find in page function.

So here’s what I have tried, but without success:

<script type="text/javascript">

$(document).ready(function() {
  if($("#search_doc_input").length > 3) {
    $('#search_doc_input').keydown(function() {
      $(body).highlight($(this).val()); 
    });
  }
});

</script>

Part 2: Also, what would be the best way, once the highlight function is active for a certain value, to scroll to the first instance of the new <span class="highlight"> added (which is what the .highlight() function does)?

Answer 1

Fiddle example:

http://jsfiddle.net/uZVGb/1/

Updated:

http://jsfiddle.net/8aM2d/1/