I have a div containing a searchable select item which is initially hidden. The div is subsequently shown based on user input. However, after showing the div, the select box does not show (or only displays as a tiny blip - depending on the browser). I am already using rev 47 of the javascript file. (though I was initially attempting to use ver 1.0.6)
Here's a workable mockup of what I'm doing.
<html>
<head>
<script type="text/javascript" src='/javascript/jquery-1.4.min.js'>
<script type="text/javascript" src='/javascript/jquery.searchabledropdown-1.0.6.src.js'>
<script>
$(function()
{
$("button").click(function(){ $("#container").show();});
$("#container").hide(); //EVERYTHING WORKS FINE IF I COMMENT OUT THIS LINE!
$("select.searchme").searchable();
});
</script>
</head>
<body>
<button> Show
<div id="container" style=>"border: 1px solid black">
<select class="searchme">
<option>one</option>
<option> two</option>
</select>
</div>
</body>
</html>
fixed in rev47, please use the latest release v1.0.7
<html>
<head>
<script type="text/javascript" src='jquery-1.4.2.min.js'></script>
<script type="text/javascript" src='jquery.searchabledropdown-1.0.7.src.js'></script>
<script>
$(function()
{
$("button").click(function(){ $("#container").show();});
$("#container").hide(); //EVERYTHING WORKS FINE IF I COMMENT OUT THIS LINE!
$("select.searchme").searchable();
});
</script>
</head>
<body>
<button> Show</button>
<div id="container" style="border: 1px solid black">
<select class="searchme">
<option>one</option>
<option> two</option>
</select>
</div>
</body>
</html>
same problem remains
tested on
firefox 3.6.6
chrome 5.0.375.86
ie 8.0.6001.18702