Форум АНТИЧАТ - автодополнение с Ajax

Форум АНТИЧАТ (https://forum.antichat.xyz/index.php)

- PHP, PERL, MySQL, JavaScript (https://forum.antichat.xyz/forumdisplay.php?f=37)

- - автодополнение с Ajax (https://forum.antichat.xyz/showthread.php?t=25456)

автодополнение с Ajax

Люди кто может помогите сделать такую фичу как дополнение результатов ввода в <select> с базы даных.... Очень надо

Такие фичи хорошо описаны в книге

Ajax в действии
В сети ее легко найти, здесь например
http://www.rsdn.ru/res/book/web/ajax.xml

спасибо но я вобще нихрена нережу в жаба скрипт у меня даже есть эта книга на столе но мне надо уже... а книгу придется читать с нуля и не только эту если есть гдето какиэто готовые экзамплы

выкинь книгу по ajax и купи книгу по javascript. В частности тут тебе нужна инфа по DOM - Document Object Model.
если сильно надо и сам нихера не шаришь - пиши в личку конкретно что и как, как будет время - распишу.

Trinux, че у тя за такая нелюбовь к термину Ajax, не первый раз вижу.
Это всего лиш одно слово, которое заменяет, выучи JS DOM CSS асинхронные запросы.

Цитата:

выкинь книгу по ajax и купи книгу по javascript

В принципе я так и делаю потому что шев сильно увлекся JS а я пишу на PHP

Цитата:

Сообщение от madnet

потому что "ajax" стал модным и это сильно бесит. AJAX это не js, css, dom и прочие технологии. Это абривиатура юзания объекта xmlhttprequest на js.
А вот js, css2, dom и прочие технологии, это концепция web 2.0 проектов. Но никак не ajax.

Бесит что люди ставят ajax движки и считают себя модными и прочее. В обшем просто бесит.

ЭТО НЕ НЕЛЮБОВЬ к xmlhttprequest`у. Я рад этой технологии и изучаю я ее самостоятелно уже более года, у меня несколько своих движков, я разобрал все "беды" с кодировками и прочее. Просто мода эта тупая достала.

Так же достала мода на BMW. и многое еще чего. Это не значит что я не люблю BMW.

Цитата:

Trinux, че у тя за такая нелюбовь к термину Ajax, не первый раз вижу.

Цитата:

Это абривиатура юзания объекта xmlhttprequest на js.

То, что обычно называют аяксом - это xmlhttprequest. Но это отнюдь не главная часть аякса.

А вот самое интеремное — имхо DOM.

Цитата:

Сообщение от nerezus

DOM это очень далеко не ajax, ну очень далеко. DOM это объект документа, представление всей html страницы в виде дерева всех ее элементов и доступа к этому дереву через js. При чем тут ajax? DOM был описан лет 6 назад.

Кстати. Слышал еще давно, что Трин говорил, про "не покупайте книги про аякс".
Неделю назад купил... лучше бы книгу Полю Дюбуа купил про БД. Ибо в книге про аякс была одна хрень.
Хороший справочник по Js все разрулит.
Или "Энциклопедия Xml" Холзнера. Все клиентские технологии(+ основы джавы) рассмотрены детально. Еще бы: 1100 страниц A4 мелким шрифтом.

Цитата:

Сообщение от nerezus

насчет справочника по JS - вот это правильно. У самого на 1500 страниц A4, все досконально рассмотрено.

Я поддержываю Trinux мне тоже кажется что технологии которые просто входят как "модно" ничо иное как просто хорошо продуманый алгоритм и ничо нового там грубо сказать нет... например я на старой роботе розработал (даже неподозревая того) свою систему MVC, когда пришел на нынешнюю фирму меня начили лечить что надо розобраться в Model View Controler я от одного названия испугался...

ну то как знатоки Js кто то поможет мне такое сделать???

Обязательно SELECT? Предлагаю просто текстовое поле меню выбора ...если будет. Если этого хватит (посмотри хотя бы на http://homefarm.ru ) - готов помочь.
Если нет.... то тоже готов=)

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

Файл 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>

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

Насчет скрипта на php: во-первых, переменную $req надо сначала брать из $_GET['req']; воизбежание ошибок при отключенной REGISTER_GLOBALS, во-вторых, ;куй_ надо фильтровать, т.к. там sql-инъекция, явная, никакая не "потенциальная", ну и в-третьихя, это мелочь, но все же: в данном случае вместо mysql_fetch_array используй mysql_fetch_assoc, т.к. при таком использовании первой, без доп. параметров, генерятся еще помимо элементов $array['name'], элементы $array[номер].