Проблема с поисковым предложением AJAX/PHP

22222221

Хорошо, я работаю над страницей часто задаваемых вопросов, но я хотел бы сделать так, чтобы, когда пользователь вводит информацию, ajax отображал предложения в реальном времени в зависимости от того, какие строки находятся в массиве.

Вот что у меня есть на данный момент, но когда я запускаю скрипт.

вообще ничего не происходит, и я не могу понять, чего мне не хватает. Итак, вот мой код: Главная страница с полем поиска (index.html)

 &lt;?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;


?&gt;


&lt;ul id="country-list"&gt;


&lt;?php


foreach($result as $question) { // DISPLAYS IN LIST WHILE TYPING


?&gt;


&lt;li onClick="selectQuestion('&lt;?php echo $question]; ?&gt;');"&gt; &lt;?php echo $question; ?&gt;&lt;/li&gt;


&lt;?php } ?&gt;


&lt;/ul&gt;


&lt;?php


}else{


}


} }


?&gt;

Код (разметка): и это php-файл, который обрабатывает запрос (readQuestions.php).

 &lt;style&gt; 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;} &lt;/style&gt; &lt;script src="[URL='https://lumtu.com/yti/agLLganNodHRwczovL2NvZGUuanF1ZXJ5LmNvbS9qcXVlcnktMi4xLjEubWluWbu']https://code.jquery.com/jquery-2.1.1.min.js[/URL]" type="text/javascript"&gt;&lt;/script&gt; &lt;script&gt; $(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(); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;center&gt; &lt;h1&gt;FAQ&lt;/h1&gt;&lt;br&gt; &lt;div class="frmSearch"&gt; &lt;input type="text" id="search-box" placeholder="Искать термин" /&gt; &lt;div id="suggesstion-box"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/center&gt; &lt;/body&gt; &lt;/html&gt;

Код (разметка):

Похожие темы	Дата
Vue.js - Интенсивный курс для программистов от Дмитрия Лаврика (2017)	19.10.2024, 18:10
[Специалист] JavaScript. Уровень 3. React и JSX (2017)	19.10.2024, 18:10
[seelentera] Никита Северинов - Javascript. Уровень 2	19.10.2024, 18:10
[Udemy] Angular 9. Практический курс по созданию Интернет Магазина [Доминик Кузьмицкий]	19.10.2024, 18:10
Social Locker For Jquery	19.10.2024, 18:10
[Владилен Минин] React Native 2020. Мобильная разработка на JavaScript (курсы)	19.10.2024, 18:10
How to Hide Div when Click Outside of the Element using jQuery!	19.10.2024, 18:10
Отключить выбранную опцию в одном поле выбора, если она выбрана в другом поле выбора	19.10.2024, 18:10
Сопоставление элемента с содержимым, если не найдено, добавить его.	19.10.2024, 18:10
Комплексное обучение JavaScript. Новый поток - LoftSchool (2017)	19.10.2024, 18:10

Проблема с поисковым предложением AJAX/PHP

22222221

I AM

Интересно