content.match is not a function

Question

I am trying to make a autocomplete system using jquery but i get the following error from firefox developer console.

content.match is not a function

What i am missing here anyone can help me please ?

Here is my Jquery code:

$(document).ready(function(){
   var timer = null;
   var tagstart = /@/gi;
   var tagword = /@(\w+)/gi;
   $("body").delegate(".addpost", "keyup", function() {
    
    clearTimeout(timer);
    timer = setTimeout(function() {
      var contents = $(this).text(); 
      var goWord = content.match(tagstart);
      var goname = content.match(tagword);
     var ID = $(this).attr("id");
   if (goWord.length > 0) {
      var appendAfterHere = $(".tag_"+ID).after('<div class="mentions"></div>');
      if (goname.length > 0) {
         
   }
   }
           
    }, 500);
  });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="postit tag_1">
    <textarea name="" id="1" cols="30" rows="10" class="addpost" placeholder="Start to type with @mention"></textarea>
  </div>
</div>

HERE is a codepen demo page also.

This occurs because of your use of `this` inside of the function passed to `setTimeout`. See https://stackoverflow.com/q/20279484/215552 — Heretic Monkey, Dec 23 '18 at 08:07

Raja Jaganathan · Accepted Answer · 2018-12-23T08:10:48.100

1

Simple typo here use contents not content

var contents = $(this).text();

$(document).ready(function(){
   var timer = null;
   var tagstart = /@/gi;
   var tagword = /@(\w+)/gi;
   $("body").delegate(".addpost", "keyup", function(e) {
 var value = e.target.value;
    clearTimeout(timer);
    timer = setTimeout(function() {
      var contents = value;
console.log('data::', contents);
      var goWord = contents.match(tagstart);
      var goname = contents.match(tagword);
     var ID = $(this).attr("id");
   if (goWord.length > 0) {
      var appendAfterHere = $(".tag_"+ID).after('<div class="mentions"></div>');
      if (goname.length > 0) {
         
   }
   }
           
    }, 500);
  });
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="postit tag_1">
    <textarea name="" id="1" cols="30" rows="10" class="addpost" placeholder="Start to type with @mention"></textarea>
  </div>
</div>

edited Dec 23 '18 at 08:10

answered Dec 23 '18 at 07:46

Raja Jaganathan

33,099
4
30
33

When I found the answer myself, you answered. But there is another error `TypeError: goWord is null` – AlwaysStudent Dec 23 '18 at 07:51
Note that there is a close reason for typos. – Heretic Monkey Dec 23 '18 at 07:58
@HereticMonkey Thank you for warning me. But apparently my real problem is another. The `var contents = $(this).text();` is everytime empty . Can you check it for me if you have a time please ? – AlwaysStudent Dec 23 '18 at 08:04
1

@Azzo here "this" is refer to setTimeout callback function so we need to cache the "this" variable out side setTimeout function. Note that str.match will return null if no matches found so null check also required. – Raja Jaganathan Dec 23 '18 at 08:12

content.match is not a function

1 Answers1