using jquery ui 1.8 trying autocomplete
Everything works apart from that the ui-menu isn't positioned under my input element, but rather in the top left corner.
Has anyone come across this problem?
Here's my html:
<div id="search">
<div id="searchFormWrapper">
<form method="post" name="searchForm" id="searchForm" action="/searchresults">
<label for="searchPhrase" id="searchFor">
Search for</label>
<input name="searchPhrase" id="searchPhrase" type="text" />
<label for="searchScope" id="searchIn">
in</label>
<select name="searchScope" id="searchScope">
<option value="">All Shops</option>
...
</select>
<input type="image" name="submitSearch" id="submitSearch" src="/images/buttons/search.gif"
alt="Search ..." />
</form>
<br class="clear" />
</div>
</div>
and here's my css:
#search
{
width:100%;
margin:0;
padding:0;
text-align:center;
height:36px;
line-height:36px;
background:#666 url(/images/interface/info_bar_bg.gif) repeat-x top left;
overflow:hidden;
font-size:12px;
}
#searchFormWrapper
{
width:520px;
height:36px;
overflow:hidden;
margin:auto;
padding:0;
}
label#searchFor
{
display:block;
float:left;
width:80px;
padding:0 5px 0 0;
margin:0 0 0 0;
text-align:right;
}
label#searchIn
{
display:block;
float:left;
width:20px;
padding:0 5px 0 0;
margin:0 0 0 0;
text-align:right;
}
#searchPhrase
{
display:block;
float:left;
width:120px;
margin:7px 0 0 0;
padding:0;
}
#searchScope
{
display:block;
float:left;
width:120px;
margin:7px 0 0 0;
padding:0;
}
#submitSearch
{
display:block;
float:left;
margin:7px 0 0 10px;
padding:0;
}
and here's my javascript:
$(document).ready(function()
{
$("#searchPhrase").autocomplete(
{
source: "/search?json",
minLength: 2
});
});