CODEWITHSUNDEEP
javascriptjqueryhtml
yaro.kir
yaro.kir

Reputation: 1

jQuery (highlight text after creating input)

I'm very new to jQuery and js. Here is question. I need to create a button which adds an input field and then highlights all expressions in given text matching with text in input. I have no problem with adding new input field. I also found solution for highlighting areas in text. The problem is I can't combine these 2 things in one. So I have following: if there is already input field on page and I type smth here, the matching parts from text are highlighted. But if i use button to add new input field and then type anything there, there is no highlight. Question may be quite silly, so can you at least tell me where exactly I can read about it? I'm really new here and have no clue why it's happening. https://jsfiddle.net/0on93vrv/1/

$(document).ready(function() {
//var max_fields      = ; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < 2){ //max input box allowed
       x++; //text box increment
    $(wrapper).append('<div><input id="input" type="text" name="mytext[]"/>     </div>');
    //add input box
   }
});
$("input").on("input.highlight", function() {
// Determine specified search term
var searchTerm = $(this).val();
// Highlight search term inside a specific context
$("#context").unmark().mark(searchTerm);
}).trigger("input.highlight").focus();
});

Upvotes: 0

Views: 695

Answers (3)

Abhinav
Abhinav

Reputation: 1200

you need to have dynamic trigger event.. have a look over..

Replace your 

$("input").on("input.highlight", function() {

with

 $("body").on("input.highlight", "input", function() {


$(document).ready(function() {
    //var max_fields      = ; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < 2){ //max input box allowed
           x++; //text box increment
        $(wrapper).append('<div><input id="input" type="text" name="mytext[]"/></div>');
        //add input box
       }
    });
    $("body").on("input.highlight", "input", function() {
   
    // Determine specified search term
    var searchTerm = $(this).val();
    // Highlight search term inside a specific context
    $("#context").unmark().mark(searchTerm);
  }).trigger("input.highlight").focus();
    });
mark {
  background: orange;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script>
<input type="text" value="test">
<div id="context">
  Some text which i want to check for matches
</div>
<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div class="color_input"><input  type="text" name="mytext[]"></div>
</div>

Upvotes: 1

Titus
Titus

Reputation: 22484

The way you add the input.highlight event listener to the input elements 

$("input").on("input.highlight", function() {
    ....
});

Make it so that the callback function will only be triggered by input.highlight events on inputs that are already in the DOM.

Try this if you want to trigger the callback on inputs that are dynamically added to the DOM:

$("body").on("input.highlight", "input", function() {
    ....
});

Upvotes: 1

Steve K
Steve K

Reputation: 9065

Use (document).on for dynamically created elements like so:

$( document ).on( "input.highlight", "input", function() {
// Determine specified search term
var searchTerm = $(this).val();
// Highlight search term inside a specific context
$("#context").unmark().mark(searchTerm);
}).trigger("input.highlight").focus();
});

Here is an updated fiddle Fiddle

Upvotes: 1

Related Questions