Question

Got this weird issue with Using jQuery 1.6.0 issue. I am trying to append some content to a div, if the user has typed more than 3 chars in a text box.

Here is my JS

$('#Form_pickForm_Name').keyup(function() {
  var searched = $('Form_pickForm_Name').value;
  if (searched.length > 2) {
    // Add the name_suggestions if doesn't exit
    if ($("name_suggestions").length < 1){
        $('#Name').append("<div id='name_suggestions'>Foo!</div>");
    }
  }
});

And this is the relevant HTML

<div id="Name" class="field text ">
    <label class="left" for="Form_pickForm_Name">Your Full Name</label>
    <div class="middleColumn">
        <input type="text" class="text" id="Form_pickForm_Name" name="Name" value="" />
    </div>
</div>

I have checked the page, and there is no other id=”Name” on it.

If I alert($('#Name')); I get null, but if I alert($('Name')) I get [object HTMLDivElement] but it still wont let me append.

Using jQuery 1.6.0

Answer 1

you have syntax errors, try this method (selector without #)… please use the val() method instead value:

$('#Form_pickForm_Name').keyup(function() {
  var searched = $('#Form_pickForm_Name').val();
  if (searched.length > 2) {
    // Add the name_suggestions if doesn't exit
    if ($("#name_suggestions").length < 1){
    $('#Name').append("<div id='name_suggestions'>Foo!</div>");
    }
  }
});