Demo of Autocomplete position option in JQuery UI
value from autocomplete object
Select to read autocomplete object position values
Change above 4 options to see how the menu changes its position.
Position option of Menu UI
HTML
<input id=my_menu>
<div id=d1 class="bg-info"></div><br>
value from autocomplete object<br>
<div id=d2 class="bg-warning">Select to read autocomplete object position values</div>
<br><br>
<div class='row'> <div class='col-md-6'>
<span class="label label-primary">my Horizontal</span>
<div class='radio-inline'>
<label><input type='radio' class='rd' name='r1' id='r1' value='left' checked>left</label>
</div>
<div class='radio-inline'>
<label><input type='radio' class='rd' name='r1' id='r2' value='center' >center</label>
</div>
<div class='radio-inline'>
<label><input type='radio' class='rd' name='r1' id='r2' value='right' >right</label>
</div>
</div><div class='col-md-6'> <span class="label label-primary">my Vertical</span>
<div class='radio-inline'>
<label><input type='radio' class='rd' name='r2' id='r1' value='top' checked>top</label>
</div>
<div class='radio-inline'>
<label><input type='radio' class='rd' name='r2' id='r2' value='center' >center</label>
</div>
<div class='radio-inline'>
<label><input type='radio' class='rd' name='r2' id='r2' value='bottom' >bottom</label>
</div>
</div></div>
<div class='row'><div class='col-md-6'> <span class="label label-primary"> at Horizontal </span>
<div class='radio-inline'>
<label> <input type='radio' class='rd' name='r3' id='r1' value='left' checked>left </label>
</div>
<div class='radio-inline'>
<label><input type='radio' class='rd' name='r3' id='r2' value='center' >center</label>
</div>
<div class='radio-inline'>
<label><input type='radio' class='rd' name='r3' id='r2' value='right' >right</label>
</div>
</div><div class='col-md-6'><span class="label label-primary"> at Vertical</span>
<div class='radio-inline'>
<label><input type='radio' class='rd' name='r4' id='r1' value='top' >top</label>
</div>
<div class='radio-inline'>
<label><input type='radio' class='rd' name='r4' id='r2' value='center' >center</label>
</div>
<div class='radio-inline'>
<label><input type='radio' class='rd' name='r4' id='r2' value='bottom' checked>bottom</label>
</div>