Как сделать автозаполнение поиска с flexsearch

Question

Как сделать автозаполнение поиска с flexsearch

В моем случае я должен создать поиск автозаполнения с помощью этого сценария. Моя проблема в том, как вызвать базу данных. Я не знаю.
Я полагаю, я должен создать еще один файл call.php

Мой код

<head>
<script src="https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@master/dist/flexsearch.min.js"></script>


<script src="search.php"></script>

<style>
table{
width: 300px;
table-layout: fixed;
}
td, tr{
border: none;
}
input{
border: 1px solid #ddd;
border-radius: 3px;
outline: none;
background-color: #f5f5f5;
}
input, div{
padding:5px 5px;
width: 100%;
box-sizing: border-box;
}
#suggestions div{
padding: 10px 0;
border-bottom: 1px solid #ddd;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>

</head>

  <div><input type="text" placeholder="Search ..." onkeyup="show_results.call(this);"></div>
<div id="suggestions"></div>

</div>


<script>
(function(){

var index = new FlexSearch({

encode: "advanced",
tokenize: "reverse",
suggest: true
});

var container = document.getElementById("suggestions");

for(var i = 0; i < data.length; i++){

index.add(i, data[i]);
}

window.show_results = function(){

var results = index.search(this.value, 10);
var fragment = document.createDocumentFragment();
var entry, tmp;

for(var i = 0; i < results.length; i++){

entry = document.createElement("div");
entry.textContent = data[results[i]];
fragment.appendChild(entry);
}

while((tmp = container.firstChild)){

container.removeChild(tmp)
}

container.appendChild(fragment);
};

}());
</script>

мой search.php, я попробовал этот код, но о том, как взять ключевые слова для поиска, сделанные кем-то.

<?php
$terms = strtolower($_GET["q"]);

$Qcheck = $Db->prepare('select distinct products_id as id,
products_description as description
from :table_products_description
where products_description LIKE :terms
limit 10
');
$Qcheck->bindValue(':terms', '%' . $terms . '%');
$Qcheck->execute();

$list = $Qcheck->rowCount() ;

if ($list > 0) {
$array = [];

while ($value = $Qcheck->fetch() ) {
$array[] = $value;
}

$json_response = json_encode($array);

echo $json_response;
?>

Я ожидаю, что внутри поля ввода результатов поиска по базе данных

0

autocomplete mysql php

Решение

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

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

Источник

Accepted Answer

Я хочу тебе помочь. Прежде всего, я не могу проверить ваш php-код, поэтому, пожалуйста, проверьте, что php возвращает строку в кодировке json. Тогда решение ваших намерений заключается в следующем.

Заменить последнюю строку в search.php этими двумя:

header('Content-Type: text/javascript');
echo 'var data = ' . $json_response . ';';

Это все 🙂

0