[英]jquery typeahead plugin doesn't work when ajax call
I search all questions about typeahead plugin in this forum and have tried all the ways i can.我在这个论坛中搜索了所有关于 typeahead 插件的问题,并尝试了所有我能做的方法。 But i have a problem yet.但我还有一个问题。 Im using codeigniter and want to autocomplete by typeahead plugin via ajax.我正在使用 codeigniter 并希望通过 ajax 通过 typeahead 插件自动完成。 This is my js code:这是我的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()
function works well, i can see the result array, but the dropdown menu never appears. console.log()
函数运行良好,我可以看到结果数组,但下拉菜单从未出现。 I've load bundle and typeahead js files and the css file.我已经加载了 bundle 和 typeahead js 文件和 css 文件。 Any suggestions?有什么建议?
This is how i implemented typeahead in my CodeIgniter project.这就是我在我的 CodeIgniter 项目中实现预先输入的方式。 Please refer the my working code.请参考我的工作代码。 In the view page在查看页面
<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>
In the controller在控制器中
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);
}
I think your controller is right.我认为你的控制器是对的。 If it doesn't work please comment the problem below.Remember i use get method.如果它不起作用,请在下面评论问题。记住我使用 get 方法。
You forgot to return result.你忘了返回结果。 Please try this:请试试这个:
success: function (data) {
console.log(data);
return process(data);
}
Also, set async:false
property.另外,设置async:false
属性。
At a very basic level, you use an asynchronous mode when you want the call to occur in the background and a synchronous mode when you want your code to wait until the call has completed.在非常基本的层面上,当您希望调用在后台发生时使用异步模式,而当您希望代码等待调用完成时使用同步模式。
Here is asyncronous
version.这是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'
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.