How to use jquery.html to insert html code inside a div

Question

I'm on way of building a script like FB search box suggestion. Where, i've an INPUT box where user can enter a name.. and, as soon as user enter a name some suggestion will automatically appear under the INPUT box. All the suggestion, will appear inside an DIV. The code which i'm using is like this...

<input name="Emp_Name" id="emplyoee_search">  
<div class="list"></div>

The suggestion list which i'm inserting inside that DIV().. i'm getting that by ajax & using jquery.HTML() i'm inserting those list inside of that DIV().

The suggestion list HTML code which i'm inserting in that DIV() is some thing like this..

<div class="listItem" align="left">Sunit K Marwah</div>
<div class="listItem" align="left">Sunit Maurya</div>

Now, the thing happening is.. i'm successfully able to build the suggestion list inside that DIV(). But, where i'm getting stuck is.. when some one click on any particular suggestion list(names) then, a javascript event need to be fire & the name need to be appear in the given INPUT box.

For java script event firing i'm using JQuery.HTML() & the code is like this..

$("div.listItem").click(function () { 
 var string = $(this).text();
 alert(string); 
//console.log(string);
});

But, my problem is.. i can successfully shows the list but when i click on the any particular name from suggestion list the java-script event is not firing & i can't able to catch the name.

I'm not a java-script xpert. So, don't know what exactly going wrong at where. Need some help.

Regards

Adam Rackis · Accepted Answer · 2011-11-20 06:35:14Z

3

If you want an event handler to be in effect for html that you add to the dom dynamically, then the jQuery live function if what you're looking for.

$("div.listItem").live("click", function () {  
   var string = $(this).text(); 
   alert(string); 
   //console.log(string);
});

edited Nov 20, 2011 at 6:35

answered Nov 20, 2011 at 6:30

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Rackis Over a year ago

@mi6 - cool. I always love when I find a Stack Overflow question that's exactly what I'm looking for.

Rafay · Accepted Answer · 2011-11-20 06:30:34Z

3

look for jquery ui autocomplete plugin it will make life easier for you... also use live with the click event

$("div.listItem").live("click",function () { ...}

or delegate

$("div.list").delegate(".listItem","click",function(){...});

answered Nov 20, 2011 at 6:30

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Comments

4b0 · Accepted Answer · 2011-11-20 06:35:36Z

0

Try :

 $(".list div").each(function(){
       alert($(this).text());
      });

answered Nov 20, 2011 at 6:35

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Comments

zequinha-bsb · Accepted Answer · 2011-11-20 15:52:06Z

Your ajax response should be:

<select id='empNameAuto' size='1' onClick='sugAccepted($(this.val));' >
    <option value='value1'>value1</option>
    <option value='value2'>value2</option>
    <option value=n>n</option>
</select>

function sugAccepted(which) {
    $('#Emp_Name').val(which);
}

the drop down list should be css-ed something like:

<div .... style='max-height:..px; overflow:scroll'>the select goes here</div>

That will look like a drop down regular select box.

Good luck!

EDIT: actually, I made a mistake here since the idea was to avoid the select altogether. My thinking was correct but the implementation can be done another way:

Your (new) ajax response:

<span style='display:block;' onClick="sugAccepted('" + response1 + "'); ">
 response1
</span>
<span style='display:block;' onClick="sugAccepted('" + response2 + "'); ">
 response2
</span>
<span style='display:block;' onClick="sugAccepted('" + response3 + "'); ">
 response3
</span>
<span style='display:block;' onClick="sugAccepted('" + response4 + "'); ">
 response4
</span>

function sugAccepted(which) {
    $('#Emp_Name').val(which);
    get-rid-of-the-suggestion-box
}


the drop down list should be css-ed something like:

<div .... style='max-height:..px; overflow:scroll'>those span go here</div>

[NOW] That will look like a drop down regular select box.

EDIT: the location of that "drop down":

How are you positioning the drop down? In case you have not figured it out yet, I would suggest:

$('#Emp_Name').keyup( function () {
    ajax-get-suggestion-list;
    if ('#suggestionBox').is(':hidden')) {
        var absH = $('#Emp_Name').offset().top;
        var absL = $('#Emp_Name').offset().left;
        append-box-absolutely-at-absH-and-absL
    }
    drop ajax-response-into-suggestion-box
    $('#suggestionBox').html(ajax-response-of-suggestions);
});

Collectives™ on Stack Overflow

How to use jquery.html to insert html code inside a div

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related