- 17, May 2024
- #1
Хорошо, я работаю над страницей часто задаваемых вопросов, но я хотел бы сделать так, чтобы, когда пользователь вводит информацию, ajax отображал предложения в реальном времени в зависимости от того, какие строки находятся в массиве.
Вот что у меня есть на данный момент, но когда я запускаю скрипт.
вообще ничего не происходит, и я не могу понять, чего мне не хватает. Итак, вот мой код: Главная страница с полем поиска (index.html)
Вот что у меня есть на данный момент, но когда я запускаю скрипт.
вообще ничего не происходит, и я не могу понять, чего мне не хватает. Итак, вот мой код: Главная страница с полем поиска (index.html)
<?php
$questions = array(
'Happy Gilmore',
'The Fast and the Furious',
'Happy, Texas',
'The Karate Kid',
'The Pursuit of Happyness',
'Avengers: End Game',
'Happy Feet',
'Another Happy Day',
);
if(!empty($_POST["keyword"])) {
$keyword = $_POST['keyword'];
foreach( $questions AS $i ){
$test = stripos($i, $keyword);
if( $test !== false ){
$result[] = $i;
?>
<ul id="country-list">
<?php
foreach($result as $question) { // DISPLAYS IN LIST WHILE TYPING
?>
<li onClick="selectQuestion('<?php echo $question]; ?>');"> <?php echo $question; ?></li>
<?php } ?>
</ul>
<?php
}else{
}
} }
?> <style> body{width:610px;} .frmSearch {border: 1px solid #a8d4b1;background-color: #c6f7d0;margin: 2px 0px;padding:40px;border-radius:4px;} #country-list{float:left;list-style:none;margin-top:-3px;padding:0;width:190px;position: absolute;} #country-list li{padding: 10px; background: #f0f0f0; border-bottom: #bbb9b9 1px solid;} #country-list li:hover{background:#ece3d2;cursor: pointer;} #search-box{padding: 10px;border: #a8d4b1 1px solid;border-radius:4px;} </style> <script src="[URL='https://lumtu.com/yti/agLLganNodHRwczovL2NvZGUuanF1ZXJ5LmNvbS9qcXVlcnktMi4xLjEubWluWbu']https://code.jquery.com/jquery-2.1.1.min.js[/URL]" type="text/javascript"></script> <script> $(document).ready(function(){ $("#search-box").keyup(function(){ $.ajax({ type: "POST", url: "readQuestions.php", data:'keyword='+$(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"); } error: function() { $("$search-box").css("background","red"); } }); }); }); function selectQuestion(val) { $("#search-box").val(val); $("#suggesstion-box").hide(); } </script> </head> <body> <center> <h1>FAQ</h1><br> <div class="frmSearch"> <input type="text" id="search-box" placeholder="Искать термин" /> <div id="suggesstion-box"></div> </div> </center> </body> </html>
![[специалист] Черчение. Базовый Курс Для Пользователей Сапр](/assets/images/icons/forum7.png){kind=icon}
