Автокомплит по городам.
Вот нарыл на просторах и пытаюсь заточить.
Поиск работает, выдает результат, но не могу понять, как сделать, чтобы при нажатии на блок (display_box) его значение передалось в поле input (#searchbox).
JS
<script type="text/javascript">
$(document).ready(function(){
$(".city").keyup(function()
{
var searchbox = $(this).val();
var dataString = 'searchcity='+ searchbox;
if(searchbox=='')
{
}
else
{
$.ajax({
type: "POST",
url: "autocomplete/search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#display").html(html).show();
}
});
}return false;
});
});
</script>
CSS
#display
{
width:215px;
display:none;
float:right; margin-right:3px;
background:#CCC;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
overflow:hidden;
position:absolute;
z-index:999;
}
.display_box
{
margin-bottom:-1px;
padding-left:10px;
padding-top:7px;
border-top:solid 1px #dedede;
font-size:14px;
height:30px;height:40px;
}
.display_box a
{
color:#3b5998;
}
.display_box:hover, .display_box:hover a
{
background:#3b5998;
color:#FFFFFF;
}
.display_box:hover{
margin-bottom:-1px;
padding-top:8px;
}
.display_box span
{
font-size:10px;
padding-bottom:2px;
}
HTML
<input type="text" placeholder="город" class="styler kom2 city" name="city" id="searchbox" autocomplete="off" />
<div id="display"></div>
PHP отправляет вот так:
echo '<div class="display_box" align="left">'."\n".
iconv('utf-8', 'cp1251', $final_city.'<br/>'."\n".'<span>'.$region).'</span><br/>'."\n".'</div>'."\n\n";