Jquery: Best way to pop-up a selection div

Question

Greetings,

Assume that I have such hidden div:

<div id="option-dialog" style="display:none;">
<a href="#" value="1">First</a>
<a href="#" value"2">Second</a>
</div>

And I have a text input field:

<input type="text" id="myinput" />

When myinput field is clicked by mouse, I want the hidden div to appear close to the selected input field and once user selects a link from this div, div dissapears and the value selected is becomes the value of the text input field. How to achieve this?

I use jquery and jquery ui

Regards

Answer 1

You can use Cluetip to do this.

Answer 2

Hi may be this what to you need?

$(function() {
$("#myinput").click(function(){
$(this).hide('slow');
$('#option-dialog').show('slow');

});

$('#option-dialog a').click(function(){
var a = $(this).text();
$(this).parent().hide('slow');
$("#myinput").val(a).show('slow');
});




});
 


<div id="option-dialog" style="display:none;">
<a href="#" value="1">First</a>
<a href="#" value"2">Second</a>
</div>
<input type="text" id="myinput" />

Answer 3

have you considered using JQueryUI: Autocomplete ? This does exactly what you are looking for

Answer 4

$("#myinput").live("focus", function() {
$("#option-dialog").toggle();
});

$(".option").live("click", function() {
var opt_val = $(this).attr("value");
$("#myinput").val(opt_val);
$("#option-dialog").toggle();

});

add class="option" to your list items