Короче, вот примерный вариант действий.
Файл get.php - скрипт, который будет брать данные из БД:
<?
// ACHTUNG!!! В скрипте присутствует потенциальная уязвимость!
// данные JS поступают в кодировке UTF-8, если у тебя БД в той же кодировке, можно оставить.
// У меня база в cp1251, приходится переконвертировать.
$req_ = iconv("utf-8", "windows-1251", $req);
mysql_connect("localhost", "root");
mysql_select_db("db_name");
$response = "";
$res = mysql_query("SELECT `name` FROM `table` WHERE `name` LIKE '" . $req_ . "%'");
while($row = mysql_fetch_array($res)) {
$name = $row['name'];
// как видно, скрипт выдает значения, обрамленные <option>
$response .= "<option>" . $name . "</option>";
}
print($response);
?>
А это файл ajax.html, в котором размещается логика "приложения" и верстка:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>select check</title>
<script language="javascript">
var req;
var mouseOver;
var choose;
// Собстно, сердце AJAX
if(window.XMLHttpRequest)
req = new XMLHttpRequest();
else
if(window.ActiveXObject)
req = new ActiveXObject("Microsoft.XMLHTTP");
// эти функции (omo и omov) служат только одной цели - при щелчке мыши вне списка список должен закрыться, так? Придется отслеживать положение мыши.
function omo() {
mouseOver = false;
}
function omov() {
mouseOver = true;
}
// та самая проверка клика...
document.onclick = function() { // блядь, во жесть...
if(!mouseOver) {
document.getElementById('div_res').style.display = "none";
}
}
// кликнули по списку (выбрали какое-то значение) - копируем его в текстовое поле и в переменную choose.
function selectfield_click() {
document.getElementById('textfield').value = document.getElementById('selectfield').options[document.getElementById('selectfield').selectedInd ex].text;
document.getElementById('div_res').style.display = "none";
choose = document.getElementById('textfield').value;
}
function textfield_change() {
var val = document.getElementById("textfield");
mouseOver = true;
if(req) {
try {
req.open('GET', 'http://myserver/get.php?req=' + encodeURI(val.value), true); // кодируем символы в UTF-8, иначе скрипту передастся бред.
req.onreadystatechange = function() {
if(req.readyState == 4) {
if(req.responseText.length > 10) {
div_res.style.display = "";
div_res.innerHTML = "<select name='selectfield' id='selectfield' size='4' onMouseOver='javascript:omov();' onMouseOut='javascript:omo();' onClick='javascript:selectfield_click();' multiple>" + req.responseText + "</select>";
}
else {
div_res.style.display = "none";
}
}
}
}
catch(err) {
alert(err);
}
// посылаем запрос.
req.send(null);
}
}
</script>
</head>
<body>
<!-- в HTML нет элемента под названием "список", который к тому же мог бы редактироваться - или я просто не знаю, если знаете - скажите, буду благодарен; поэтому можно схитрить - поставить текстовое поле, а под ним - select с параметром multiple, что значит что список будет скроллируемый, но всегда открытый. -->
<!-- теперь надо подобрать шрифт и размер поля, а так же подумать о максимальной длине возвращаемого значения из БД. -->
<input type='text' id='textfield' size='20' onBlur='javascript:omo();' onKeyUp='javascript:textfield_change();'>
<!-- изначально слой невидим, положение его "относительно" - то есть он будет сдвигать остальные элементы на странице. Это некрасиво, рекомендую сделать position:absolute, но для примера достаточно и этого. -->
<div style='display:none;position:relative;' id='div_res'></div>
</body>
</html>
// Я не думаю, что это идеал, но это хоть что-то...