Как сменить автозаполнение от результатов ajax

Question

Я сделал простое текстовое поле, чтобы ввести пользовательский ввод. Я передаю эту информацию на страницу PHP через ajax (на каждом входе), чтобы получить результат. Я могу отображать эти результаты в DIV ниже поля ввода, но мне не удается изменить результаты автозаполнения.

MY JS КОД:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<input type="text" name="search" id="search" > 
<div id="test"></div> 


<script type="text/javascript"> 

var availableTags = null; 

$('#search').on('input', function() { 

     var input_txt = $('#search').val(); 

      $.ajax({ 
      url: "ajax_search.php", 
      method: "get", 
      data: { input: input_txt }, 
      success: changeInput 

      }); 
}); 


function changeInput(content){ 
    $("#test").html(content); 

    availableTags = content; 

    $("#search").autocomplete({ 
     source: availableTags 
    }); 
} 


</script> 

МОЯ PHP из (ajax_search.php)

$input = $_GET['input']; 

if(!empty($input)) 
{ 
$stmt = $conn->prepare('SELECT * FROM cities WHERE city LIKE :input'); 
$stmt->execute(array('input' => $input.'%')); 


while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) 
    { 
     echo $row['city']."<br>"; 
    } 

} 

Я не могу понять, как обрабатывать результаты передать их к источнику автозаполнения. Спасибо

Answer 1

Проблема, которую я вижу, это то, что autocompletesource property requires an array в качестве входных данных, и вы, кажется, пропустите HTML. Вы можете быть в состоянии использовать раскол, чтобы преобразовать его:

availableTags = content.split("<br>"); 
$("#search").autocomplete("option", "source", availableTags); //<==jquery docs suggest this method 
$("#search").autocomplete({ source: availableTags }); //<==OP suggests this works 

обновление

Если вы хотите использовать JQuery автозаполнения в вашем коде, то вам необходимо включить файлы кода для JQuery UI. Я вижу, что вы уже используете размещенную в Google библиотеку. Вы можете вернуться туда и найти правильные библиотеки, чтобы включить for jQuery UI. Кстати, вам нужны файлы CSS и JS.