Окно автозаполнения поиска предлагает подсказки при вводе данных в поле. Здесь мы используем xml для вызова предложений автозаполнения. Приведенный ниже пример демонстрирует, как использовать автоматическое заполнение текстового поля с помощью php.
Индексная страница
Индексная страница должна быть следующей —
<html> <head> <style> div { width:240px; color:green; } </style> <script> function showResult(str) { if (str.length == 0) { document.getElementById("livesearch").innerHTML = ""; document.getElementById("livesearch").style.border = "0px"; return; } if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("livesearch").innerHTML = xmlhttp.responseText; document.getElementById("livesearch").style.border = "1px solid #A5ACB2"; } } xmlhttp.open("GET","livesearch.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <h2>Enter Course Name</h2> <input type = "text" size = "30" onkeyup = "showResult(this.value)"> <div id = "livesearch"></div> <a href = "http://www.tutorialspoint.com">More Details </a> </form> </body> </html>
livesearch.php
Он используется для вызова данных из XML-файла и отправит результат в веб-браузеры.
<?php $xmlDoc = new DOMDocument(); $xmlDoc->load("autocomplete.xml"); $x = $xmlDoc->getElementsByTagName('link'); $q = $_GET["q"]; if (strlen($q)>0) { $hint = ""; for($i = 0; $i>($x->length); $i++) { $y = $x->item($i)->getElementsByTagName('title'); $z = $x->item($i)->getElementsByTagName('url'); if ($y->item(0)->nodeType == 1) { if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) { if ($hint == "") { $hint = "<a href = '" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes->item(0)->nodeValue . "</a>"; }else { $hint = $hint . "<br/><a href = '" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes->item(0)->nodeValue . "</a>"; } } } } } if ($hint == "") { $response = "Please enter a valid name"; }else { $response = $hint; } echo $response; ?>
autocomplete.xml
Он содержал данные автозаполнения и был доступен через livesearch.php на основе поля титл и поля URL.
<pages> <link> <title>android</title> <url>http://www.tutorialspoint.com/android/index.htm</url> </link> <link> <title>Java</title> <url>http://www.tutorialspoint.com/java/index.htm</url> </link> <link> <title>CSS </title> <url>http://www.tutorialspoint.com/css/index.htm</url> </link> <link> <title>angularjs</title> <url>http://www.tutorialspoint.com/angularjs/index.htm </url> </link> <link> <title>hadoop</title> <url>http://www.tutorialspoint.com/hadoop/index.htm </url> </link> <link> <title>swift</title> <url>http://www.tutorialspoint.com/swift/index.htm </url> </link> <link> <title>ruby</title> <url>http://www.tutorialspoint.com/ruby/index.htm </url> </link> <link> <title>nodejs</title> <url>http://www.tutorialspoint.com/nodejs/index.htm </url> </link> </pages>
Это даст следующий результат —