плагин jquery typeahead не работает при вызове ajax

Я ищу все вопросы о плагине typeahead на этом форуме и перепробовал все возможные способы. Но у меня есть проблема. Я использую codeigniter и хочу автозаполнение с помощью плагина typeahead через ajax. Это мой код JS:

$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
}, {
source: function (query, process) {
$.ajax({
url: baseUrl + 'panel/yazilarim/deneme',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON',
async: true,
success: function (data) {
console.log(data);
process(data);
}
});
}
});
public function deneme() {
$aranan = $this->input->post("query");
$sorgu = $this->db->select("ad")->from("kategori")->where("ad LIKE '%" . $aranan . "%' ")->get();

$sonuclar = $sorgu->result_array();
$dizi = [];
foreach ($sonuclar as $sonuc) {
$dizi[] = $sonuc["ad"];
}
echo json_encode($dizi);
}

console.log() Функция работает хорошо, я вижу массив результатов, но выпадающее меню никогда не появляется. Я загружаю файлы js bundle и typeahead и файл css. Какие-либо предложения?

1

Решение

Вот как я реализовал typeahead в своем проекте CodeIgniter. Пожалуйста, ознакомьтесь с моим рабочим кодом. На странице просмотра

    <script src="<?php echo base_url('assets/js/typeahead.min.js'); ?>" > </script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'<?php echo base_url(); ?>panel/yazilarim/deneme?query=%QUERY',
limit : 5
});
});
</script><div class="form-group">
<input type="text" name="member"  class="form-control typeahead" style="width:280px;"  autocomplete="off" >
</div>

В контроллере

public function deneme() {
$aranan = $this->input->get("query");
$sorgu = $this->db->select("ad")->from("kategori")->where("ad LIKE '%" . $aranan . "%' ")->get();

$sonuclar = $sorgu->result_array();
$dizi = [];
foreach ($sonuclar as $sonuc) {
$dizi[] = $sonuc["ad"];
}
echo json_encode($dizi);
}

Я думаю, что ваш контроллер прав. Если это не работает, пожалуйста, прокомментируйте проблему ниже. Помните, я использую метод get.

1

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

Вы забыли вернуть результат. Пожалуйста, попробуйте это:

success: function (data) {
console.log(data);
return process(data);
}

Также установите async:false имущество.

На самом базовом уровне вы используете асинхронный режим, когда вы хотите
вызов происходит в фоновом режиме и в синхронном режиме, когда вы хотите
Ваш код для ожидания до завершения вызова.

Вот asyncronous версия.

source: function (query, process) {
var getData = getData();
getData.done(function(data){
return process(data);
// do stuff with `information` here, not elsewhere.
});
function getData(){
return $.ajax({
url: baseUrl + 'panel/yazilarim/deneme',
type: 'POST',
data: 'query=' + query,
dataType: 'JSON'
});
}
}
0

По вопросам рекламы [email protected]