При наборе фамилии выпадает список всех фамилий начинающийся на букву Б и сам список проваливается в бок, нет рамок, взял шаблон бутстрапа, а прикручиваю так скажем на лету, не очень получается со стилизациеё но всё же. Код (Text): <script> $(document).ready(function(){ $("#search-box").keyup(function(){ $.ajax({ type:"POST", url:"read.php", data:'keylord='+$(this).val(), beforeSend:function(){ $("#search-box").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px"); }, success:function(data){ $("#suggesstion-box").show(); $("#suggesstion-box").html(data); $("#search-box").css("background","#FFF"); } }); }); }); function selectCountry(val){ $("#search-box").val(val); $("#suggesstion-box").hide(); } $(document).ready(function(){ $("#search-box1").keyup(function(){ $.ajax({ type:"POST", url:"read1.php", data:'keylord0='+$(this).val(), beforeSend:function(){ $("#search-box1").css("background","#FFF url(LoaderIcon.gif) no-repeat 165px"); }, success:function(data){ $("#suggesstion-box").show(); $("#suggesstion-box").html(data); $("#search-box1").css("background","#FFF"); } }); }); }); function select1(val){ $("#search-box1").val(val); $("#suggesstion-box").hide(); } </script> </head> <body> <formmethod="post" action="tool1.php"> <div> <?php echo '<table>'; echo '<tr>'; echo '<b align="right"><td>Фамилия:</td><td><input type="text" id="search-box" name="keylord0" align="right" placeholder='.$rrow1.' value="" /></b><br></td>'; echo '</tr>'; echo '<tr>'; echo '<b align="right"><td>Имя:</td><td><input type="text" id="search-box1" name="keylord1" align="right" placeholder='.$rrow2.' value="" /></b><br></td>'; echo '</tr>'; echo '<tr>'; echo '<b align="right"><td>Отчество:</td><td><input type="text" id="search-box2" name="keylord2" align="right" placeholder='.$rrow3.' value="" /></b><br></td>'; echo '</tr>'; echo '</table>'; echo '<button type="submit">Отправить форму</button>'; ?> <script> let inp = document.getElementById("search-box"); let inp1 = document.getElementById("search-box1"); let inp2 = document.getElementById("search-box2"); let sbm = document.querySelector("form button"); //alert(inp.getAttribute("placeholder")); sbm.onclick =function(){ if(inp.value ===undefined|| inp.value ===null|| inp.value ===""){ inp.value = inp.getAttribute("placeholder"); } if(inp2.value ===undefined|| inp2.value ===null|| inp2.value ===""){ inp2.value = inp2.getAttribute("placeholder"); } if(inp1.value ===undefined|| inp1.value ===null|| inp1.value ===""){ inp1.value = inp1.getAttribute("placeholder"); } }; </script>
Та еще порнография. Напишите лучше сами, разберетесь заодно. Я бы начал так: HTML: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <title>fio</title> </head> <body> <table class="table"> <thead> <tr> <th><input class="form-control fio" type="text" name="f" placeholder="Фамилия"/></th> <th><input class="form-control fio" type="text" name="i" placeholder="Имя"/></th> <th><input class="form-control fio" type="text" name="o" placeholder="Отчество"/></th> </tr> </thead> <tbody> </tbody> </table> <script> var fio = document.querySelectorAll('input.fio'); [].forEach.call(fio, function(item){ item.addEventListener('input', function(){ console.log(this.value); }) }) </script> </body> </html> --- Добавлено --- Вот тебе массив, сделай так чтобы выводило в таблицу и чему то научишься: PHP: <?php $array = [ [ 'f' => 'Иванов', 'i' => 'Иван', 'o' => 'Иванович', ], [ 'f' => 'Петров', 'i' => 'Петр', 'o' => 'Иванович', ] ]; $array = json_encode($array); ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <title>fio</title> </head> <body> <table class="table"> <thead> <tr> <th><input class="form-control fio" type="text" name="f" placeholder="Фамилия"/></th> <th><input class="form-control fio" type="text" name="i" placeholder="Имя"/></th> <th><input class="form-control fio" type="text" name="o" placeholder="Отчество"/></th> </tr> </thead> <tbody> </tbody> </table> <script> var fio = document.querySelectorAll('input.fio'), find = JSON.parse('<?=$array?>'); console.log(find); [].forEach.call(fio, function(item){ item.addEventListener('input', function(){ console.log(this.value); }) }) </script> </body> </html>
Тыж панимаешь что там подключение к базе нажимаеш клавишу Б идёт запрос к базе SQL и вылетает список, мне бы <style> прописать https://blogjquery.ru/wp-content/files/demo/avtozapolnenie-polej-na-js-ili-zhivoj-poisk-po-bd/
лучше передавай json через ajax. на основе полученных данных, отрисовывай на js список ul li. стилизовать же несложно его