динамический выпадающий список заполняется ТОЛЬКО если я нажимаю на него

Question

динамический выпадающий список заполняется ТОЛЬКО если я нажимаю на него

У меня есть текстовое поле (автозаполнение), где пользователи могут ввести имя актера / актрисы, которая отлично работает.
Как только пользователь вставит имя в текстовое поле, должен быть заполнен динамический выпадающий список, показывающий список фильмов этого актера.

Проблема:

когда пользователь вставляет имя в текстовое поле, заполняется пустой раскрывающийся список, но если пользователь щелкает раскрывающийся список или где-то на странице, то в раскрывающемся списке отображается список фильмов! Другая проблема заключается в том, что если пользователь нажмет Enter внутри текстового поля (после того, как он вставит имя), текстовое поле будет очищено !!
Может ли кто-нибудь любезно сообщить мне, в чем проблема с моим кодом?

Вот код:

<html>
<head>
<link type="text/css" href="res/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="res/jquery.min.js"></script>
<script type="text/javascript" src="res/jquery-ui.min.js"></script>
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js"type="text/javascript"type="text/javascript"></script>
</head>

<body>
<form>
<p>
<input type="textbox" name= "tag" id="tags" placeholder="Enter an actor/actress name here" />
</p>
<p>
<select id="movieName" name="movieName[]" multiple="multiple" width="200px" size="10px" style="display:none;">
</select>
</p>

<script type="text/javascript">
$(document).ready(function () {
$("#tags").autocomplete({
source: "actorsauto.php",
minLength: 2,
focus: function( event, ui ){
event.preventDefault();
return false;
},
select: function (event, ui){
$("#tags").on('autocompletechange change', function () {
var selectedVal = $(this).val();
$.post("actions.php", {q: selectedVal}, function (response){
console.log(response);
$("#movieName").html(response).show();
});
}).change();
}
});
});
</script>
</form>
</body>
</html>

и это actions.php:

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

$html = "";
if(isset($_POST['q']) && !empty($_POST['q'])){
try{
include('imdbConnection.php');
$sql = $conn->prepare("SELECT DISTINCT movieName FROM cast_movie WHERE castName = :q");
$sql->execute(array(':q' => $_POST['q']));
while($rows = $sql->fetch(PDO::FETCH_ASSOC)){
$option = '<option value="' . $rows['movieName'] . '">' . $rows['movieName'] . '</option>';
$html .= $option;
}
} catch(PDOException $e){
echo 'ERROR: ' . $e->getMessage();
}

echo $html;
exit;
}
?>

0

ajax autocomplete drop-down-menu jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

эта часть.

$("#tags").on('autocompletechange change', function () {
var selectedVal = $(this).val();
$.post("actions.php", {q: selectedVal}, function (response){
console.log(response);
$("#movieName").html(response).show();
});
}).change();

Действие будет совершено на «смену». , попытайтесь изменить его, так как при «keyup» изменение будет срабатывать только в том случае, если элемент теряет фокус.

РЕДАКТИРОВАТЬ: вы должны изменить эту часть ..

 $("#tags").on('autocompletechange keyup', function () {
var selectedVal = $(this).val();
$.post("actions.php", {q: selectedVal}, function (response){
console.log(response);
$("#movieName").html(response).show();
});
}).keyup();

1