ANTICHAT - Показать сообщение отдельно

Короче, вот примерный вариант действий.

Файл get.php - скрипт, который будет брать данные из БД:

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, в котором размещается логика "приложения" и верстка:

PHP код:


		
			
<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').selectedIndex].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>

// Я не думаю, что это идеал, но это хоть что-то...